Home/ Questions/Q 7601987
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T23:17:54+00:00

I’ve three divs. Each div must increment its counter val upon clicking them. HTML:

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0