Generate .click functions inside for loop

Question

Inside my for loop that loops through 15 "box" objects, code below:

for (var i = 0; i < boxesLength; i++) {

I'm trying to generate these click events automatically, they used to be like this: (all the way up until 15)

$("#box0").click(function(){
    var rw = 462;
    var input = $('#rw');
    input.val(rw);

    var rh = 310;
    var input = $('#rh');
    input.val(rh);
    calculateRectangle();
    calculateRectangle2();
});

Right now I am trying to auto-generate these in the for loop by doing this:

$("#box" + i).click(function(){
    var rw = allBoxes[i].width;
    var input = $('#rw');
    input.val(rw);

    var rh = allBoxes[i].length;
    var input = $('#rh');
    input.val(rh);
    calculateRectangle();
    calculateRectangle2();
});

What am I doing wrong? When I console log "#box" + i I am getting the expected result..

Why are you setting 15 different event listeners to the boxes, instead of setting just 1 to a common ancestor and delegating it to them? Your code becomes extremely repetitive that way. — Angel Politis
– Angel Politis, Commented Oct 4, 2018 at 7:37

Mihai Alexandru-Ionut · Accepted Answer · 2018-10-04 09:27:39Z

1

This is an exemple of closures. When you're trying to click one button then your alghorithm will use the last value of i variable which is boxesLength.

To solve this, just use letkeyword.

for (let i = 0; i < boxesLength; i++) {
     ^^^

edited Oct 4, 2018 at 9:27

answered Oct 4, 2018 at 7:35

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

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

Comments

Marius Turcu · Accepted Answer · 2018-10-04 07:47:16Z

0

Another solution will be like this:

$("#box" + i).click(function(i){
return function(){
    var rw = allBoxes[i].width;
    var input = $('#rw');
    input.val(rw);

    var rh = allBoxes[i].length;
    var input = $('#rh');
    input.val(rh);
    calculateRectangle();
    calculateRectangle2();
}}(i));

answered Oct 4, 2018 at 7:47

Marius Turcu

1,5097 silver badges14 bronze badges

Collectives™ on Stack Overflow

Generate .click functions inside for loop

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related