Why my jquery code wont work if with ID but Class

Question

I have html code like this.

<input onkeyup="ave()" type="text" name="1" class = "ave" style="width: 60px"></td>
<input onkeyup="ave()" type="text" name="2" class = "ave" style="width: 60px"></td>
<input onkeyup="ave()" type="text" name="3" class = "ave" style="width: 60px"></td>

The jQuery like this

function ave(){

   $('.ave').keyup(function(){
      var sum = 0;
      var ave = 0;
      $('.ave').each(function(){
        sum += +$(this).val();
      });
      var ave  = sum/3;
      $('.total').val(ave.toFixed(2));
   });
}

If I change 'class' to 'ID' and $('.ave') to $('#ave') the code won't work!

Answer 1

IDs are unique within a HTML document,Id can be used only one time in a document but classes can be used multiple times within the same document. IDs usually identify a unique item within your document where as classes help apply a common style to multiple items across the page. Hence for your problem can not use Id.

Answer 2

ID should always be unique .

Using class is the solution for this problem

Answer 3

Please have a look at below code. You can refer this code and can check how we are calculating the average

 function ave(){ var sum = 0; var ave = 0; $('.myTextboxContainer input').each(function(){ if(!isNaN($(this).val())) sum += +$(this).val(); }); ave = sum/$('.myTextboxContainer input').length; $('.total').val(ave.toFixed(2)); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <table class="myTextboxContainer"> <tr> <td><input onkeyup="ave()" type="text" name="1" id = "ave1" style="width: 60px"></td> <td><input onkeyup="ave()" type="text" name="2" id = "ave2" style="width: 60px"></td> <td><input onkeyup="ave()" type="text" name="3" id = "ave3" style="width: 60px"></td> </tr> </table> <div> Average is : <input type="text" class="total"></span> </div>

Answer 4

In your code you are binding same element twice. onkeyup="ave()" and inside the function $('.ave').keyup(function() here javascript first call your function ave() but there is one more time binding keyup object..

1. So the first keyup goes to function ave() and bind .ave with keyup event.

2. On second keyup is call same ave() then perform jquery keyup bind from first keyup then so the .each(function(){ executes twice then again element bind

3. The third and other keyup will make complex binding 4 times executes keyup and so on.

Best practice

 <input onkeyup="ave()" type="text" name="1" class = "ave" style="width: 60px"></td>
    <input onkeyup="ave()" type="text" name="2" class = "ave" style="width: 60px"></td>
    <input onkeyup="ave()" type="text" name="3" class = "ave" style="width: 60px"></td>

Javascript

function ave(){
      var sum = 0;
      var ave = 0;
      $('.ave').each(function(){
        sum += +$(this).val();
      });
      var ave  = sum/3;
      $('.total').val(ave.toFixed(2));
}

FiDDLE DEMO