creating jquery click functions with for loop

Question

I am trying to create a function that adds an additional text field when the user clicks a button. The way it works is that there are actually four text fields and three buttons. Three of the four text fields are hidden using "display:none" and two of the three buttons are hidden. When you click button 1, text field 2 and button 2 shows and when you click button 2, text field 3 and button 3 shows and so on. This is manageable by putting in the code manually but becomes a burden when many text fields must be created. So far, I've used this code:

<html>
<head>
<style type="text/css">
.hide {display:none;}
</style>


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">


$(document).ready(function(){


$("#add"+2 ).click(function(){
$("#add"+2).hide();
$("#text"+2).show();
$("#add"+3).show();
  });
$("#add"+3 ).click(function(){
$("#add"+3).hide();
$("#text"+3).show();
$("#add"+4).show();
  });

$("#add"+4 ).click(function(){
$("#add"+4).hide();
$("#text"+4).show();

  });


});

</script>

</head>
<body><div id="border">
<form action="" method="post">

<table>
<tr>
<td>
<input type="text" id="text1" name="text1" />
</td>
<td>
<input type="button" id="add2"  name="add" value="add another field" />
<input type="button" id="add3" class="hide" name="add" value="add another field" />
<input type="button" id="add4" class="hide" name="add" value="add another field" />
</td>
</tr>
<tr>
<td>
<input type="text" id="text2" class="hide" name="text2" /><br>
<input type="text" id="text3" class="hide" name="text3" /><br>
<input type="text" id="text4" class="hide" name="text4" />
<td>
</tr>
</table>

</form>
</div>
</body>
</html>

I then replaced

    $("#add"+2 ).click(function(){
    $("#add"+2).hide();
    $("#text"+2).show();
    $("#add"+3).show();
      });
    $("#add"+3 ).click(function(){
    $("#add"+3).hide();
    $("#text"+3).show();
    $("#add"+4).show();
      });

with a for loop to try to do the same thing

var i = 2;
for (i=2; i<=3; i++)
{
 $("#add"+i ).click(function(){
        $("#add"+i).hide();
        $("#text"+i).show();
        $("#add"+(i+1)).show();
          });
}

after replacing with the for loop, only the fourth text field displays after clicking the first button. Is there some logic I'm not understanding here? Thanks in advance.

alex · Accepted Answer · 2011-06-09 05:53:14Z

13

Your inner function has a closure to the outer i, so when it accesses i, it accesses the variable itself, not its value.

You can break this with a self executing function and passing the value to a new local variable.

var i = 2;
for (i = 2; i <= 3; i++) {

    (function(j) {
        $("#add" + j).click(function() {

            $("#add" + j).hide();
            $("#text" + j).show();
            $("#add" + (j + 1)).show();
        });

    })(i);
}

answered Jun 9, 2011 at 5:53

alex

492k205 gold badges890 silver badges992 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

alex Over a year ago

@user Functions are first class. So I create an anonymous function, and then execute it with (). The argument in the ending () is passed to the anonymous function.

thecodeparadox · Accepted Answer · 2011-06-09 06:56:07Z

0

You may test this:

$(':button').click(function(e) {
    var index = $(e.target).index();
    $('.add:eq(' + index + ')').hide();
    $('input:text:eq(' + (index + 1) + ')').show();
    $('.add:eq(' + (index + 1) + ')').show();
});

answered Jun 9, 2011 at 6:56

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

Collectives™ on Stack Overflow

creating jquery click functions with for loop

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related