CODEWITHSUNDEEP
javascriptjqueryhtml
PhoenixDown
PhoenixDown

Reputation: 355

Attaching functions to elements in a loop

I have the following HTML and JavaScript it works for the first set of elements when I have a '1' in the selector but when I replace the '1' with an 'i' it doesn't attach itself to any of the elements. Any ideas as to why this might not be working? (the script is meant to add the first 3 columns of each row and display it in the fourth)

Live Link: http://jsfiddle.net/c5mPc/

<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script>
  $(document).ready(function(){

    for (i = 2; i <= 14; i++)
    {
      $("#Q19_LND_"+i).keyup(function(){
        $("#autoSumRow_"+i).val(Number($("#Q19_LND_"+i).val()) + Number($("#Q19_CE_"+i).val()) + Number($("#Q19_SOLSD_"+i).val()));
      });

      $("#Q19_CE_"+i).keyup(function(){
        $("#autoSumRow_"+i).val(Number($("#Q19_LND_"+i).val()) + Number($("#Q19_CE_"+i).val()) + Number($("#Q19_SOLSD_"+i).val()));
      });

      $("#Q19_SOLSD_"+i).keyup(function(){
        $("#autoSumRow_"+i).val(Number($("#Q19_LND_"+i).val()) + Number($("#Q19_CE_"+i).val()) + Number($("#Q19_SOLSD_"+i).val()));
      });

    }

  });
</script>

</head>

<body>

<table>
  <tr>
    <td><font face="arial" size="-1">Lap Roux-N-Y</font>&nbsp;</td>
    <td align="center"><input tabindex="1" type="text" name="Q19_LND_1" size="3" value="" id="Q19_LND_1"></td>
    <td align="center"><input tabindex="2" type="text" name="Q19_CE_1" size="3" value="" id="Q19_CE_1"></td>
    <td align="center"><input tabindex="3" type="text" name="Q19_SOLSD_1" size="3" value="" id="Q19_SOLSD_1"></td>
    <td align="center"><input tabindex="4" disabled  type="text" name="autoSumRow_1" size="3" value="" id="autoSumRow_1"></td>
  </tr>
  <tr>
    <td nowrap width="1" bgcolor="#006699" colspan="9"><img src="/images/wi/nothing.gif" width="1" height="1"></td>
  </tr>
  <tr>
    <td><font face="arial" size="-1">Lap Esophagectomy</font>&nbsp;</td>
    <td align="center"><input tabindex="5" type="text" name="Q19_LND_2" size="3" value="" id="Q19_LND_2"></td>
    <td align="center"><input tabindex="6" type="text" name="Q19_CE_2" size="3" value="" id="Q19_CE_2"></td>
    <td align="center"><input tabindex="7" type="text" name="Q19_SOLSD_2" size="3" value="" id="Q19_SOLSD_2"></td>
    <td align="center"><input tabindex="8" disabled  type="text" name="autoSumRow_2" size="3" value="" id="autoSumRow_2"></td>
  </tr>
  <tr>
</table>

</body>
</html>

Upvotes: 1

Views: 92

Answers (1)

David Tang
David Tang

Reputation: 93664

This is a common problem with closures created in loops. If we take one of them as an example:

$("#Q19_LND_"+i).keyup(function(){
   $("#autoSumRow_"+i).val(Number($("#Q19_LND_"+i).val()) + Number($("#Q19_CE_"+i).val()) + Number($("#Q19_SOLSD_"+i).val()));
});

The handler function for keyup is called at a later stage, after the loop has completed. This means that the value of i is 15, so it's always searching for an element with id "autoSumRow_15". A common workaround for this problem is to create a temporary function that passes in the current value of i, but in your case, you can utilise jQuery's ability to pass data along with an event. You'd do something like this:

$("#Q19_LND_"+i).keyup({index: i}, function (e) {
    var index = e.data.index;
    $("#autoSumRow_"+index).val(Number($("#Q19_LND_"+index).val()) + Number($("#Q19_CE_"+index).val()) + Number($("#Q19_SOLSD_"+index).val()));
});

If you're interested, the (more generic) temporary function alternative I mentioned can be done like this:

$("#Q19_LND_"+i).keyup((function (index) {
    return function () {
        $("#autoSumRow_"+index).val(Number($("#Q19_LND_"+index).val()) + Number($("#Q19_CE_"+index).val()) + Number($("#Q19_SOLSD_"+index).val()));
    };
}) (i));

Upvotes: 5

Related Questions