CODEWITHSUNDEEP
javascriptjquery
Priya
Priya

Reputation: 921

Each div must increments its counter upon clicking

I've three divs. Each div must increment its counter val upon clicking them.

HTML:

<body>
    <content>
        <div id="box1" class="v1" onclick="counter('box1')";>A : <span class="num">0</span></div>
        <div id="box2" class="v2" onclick="counter('box2')">B: <span class="num">0</span></div>
        <div id="box3" class="v3" onclick="counter('box3')">C: <span class="num">0</span></div>
    </content>
</body>​

Javascript:

  function counter(id){
     var id = document.getElementById(id);
     $('#id').click(function () {
          update($("span"));
     });
  }

  function update(j) {
     var n = parseInt(j.text(), 10);
     j.text(n + 1);
  }

​

Here is the code demo

Upvotes: 0

Views: 3321

Answers (8)

Jeff B
Jeff B

Reputation: 30099

You are doing a lot of work that jQuery would do for you. If you change your class to simply box and use the ID's to style your content, you can do the whole thing like this:

<body>
    <content>
        <div id="box1" class="box">A: <span class="num">0</span></div>
        <div id="box2" class="box">B: <span class="num">0</span></div>
        <div id="box3" class="box">C: <span class="num">0</span></div>
    </content>
</body>

 

$( function() {
    $('.box').click( function() {
        var num = $(this).find('.num');
        num.text( parseInt(num.text()) + 1 );
    });       
});

Example: http://jsfiddle.net/ddvQU/1/

Some thoughts:

  • If a style is unique to a single element (now and in the future), you should be using IDs. Styles that are (or will be) common to multiple elements should use classes.

  • Using inline javascript onclick='blah()' is more difficult to manage, as it is not as easy to debug, does not allow for code reuse, and forces you to make updates in lots of places when you change code. It also makes you do nasty things like escaping quotes.

  • var id = document.getElementById(id); <= The whole reason we have jQuery is so that we don't have to do this. Simply do $('#'+id). (ok, maybe not the whole reason, but one of them).

  • You don't need to do the above if you attach a jQuery handler to your class of elements (see the first bullet). The handler will already have a reference to the object, even if it doesn't even have an ID.

  • I would use .on() instead of .click(), but as you look to be new to jQuery, get this to work first, and then look into why on() is better, and how to do it.

Upvotes: 4

Starx
Starx

Reputation: 78991

There are many bugs in your script. Not to mentione, the markup selection is quite vague.

With a little update to some mark-ups, we can do this with a tiny snippet.

$(".clicable").click(function() {
    $(this).children("span").html(parseInt($(this).children("span").html()) + 1);
});

Check the demo here

Upvotes: 0

Nealv
Nealv

Reputation: 6884

Fixed that for you.

It is much cleaner when you have clean html, and seperate the javascript to do the work.

<body>
    <content>
        <div id="box1" class="count-div">A : <span class="num">0</span></div>
        <div id="box2" class="count-div">B: <span class="num">0</span></div>
        <div id="box3" class="count-div">C: <span class="num">0</span></div>
    </content>
</body>​

$(function(){
    $(".count-div").click(function(){
        amount = 1;
        value = parseInt($(this).find("span").html());
        $(this).find("span").html(value+amount);                
    });
});

You can even clean that up more so you have less code. If you have any question ask me

http://jsfiddle.net/4eqve/33/

Upvotes: 0

Jivings
Jivings

Reputation: 23250

If you're using jQuery then you might as well use the click handler it provides. You were quite close with your implementation, but you need to make sure that you're referencing the correct elements. I changed it so that you are passing the box div to the update function, that then selects the correct span from inside that div element.

// jQuery onclick for the boxes
$('#box1, #box2, #box3').click(function() {
   update(this);
});

function update(j) {
    var span = $(j).children('span');
    var n = parseInt(span.text())+1;
    span.text(n);
}

Here's the jsFiddle: http://jsfiddle.net/4eqve/29/ ​

Upvotes: 0

John Strickler
John Strickler

Reputation: 25421

http://jsfiddle.net/4eqve/32/

  • Use a closure to store a counter variable for each DIV.
  • Attach a click handler.

Upvotes: 2

charlietfl
charlietfl

Reputation: 171669

http://jsfiddle.net/4eqve/24/

demo stores each count in data. One big thing that would have helped you is apply a common class to the elements you want to bind handler too as you'll see in this demo with added class "box"

Upvotes: 1

Engineer
Engineer

Reputation: 48793

Change counter function to this:

function counter(id){
   update( $('#'+id+">span") );
}

Upvotes: 1

kand
kand

Reputation: 2338

Assign a click function to your div that does:

$('#div_id').html(parseInt($('#div_id').html())++)

or something along those lines.

Upvotes: 2

Related Questions