JavaScript closures in for-loop

Question

As explained here http://www.mennovanslooten.nl/blog/post/62/ code below outputs result just for "5x5" forgetting about anything before that.

for (x = 1; x <= 5; x++) {
for (y = 1; y <= 5; y++) {

    var cords = x+"x"+y;
    var el = document.getElementById(cords);
    el.addEventListener("click", function (e) { B_modeWindow('1', cords); });

}
}

As far I have the informations (blog link provided above) can't figure out how to alter showed code to fix it.

How to walk around this code with JavaScript closure in my for-loop?

edit: I dont get it. varibles are defined in good way. Test:

for (x = 1; x <= 5; x++) {
for (y = 1; y <= 5; y++) {

    var cords = x+"x"+y;
    alert(cords);

}
}

Ry- · Accepted Answer · 2012-09-09 21:35:56Z

1

Call the function with anything you need to be closed as an argument. In this case, that's cords.

for (x = 1; x <= 5; x++) {
    for (y = 1; y <= 5; y++) {
        var cords = x + "x" + y;
        var el = document.getElementById(cords);

        (function(cords) {
            el.addEventListener("click", function (e) { B_modeWindow('1', cords); });
        })(cords);
    }
}

answered Sep 9, 2012 at 21:35

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

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

2 Comments

jfriend00 Over a year ago

@user1656447 - if this doesn't work, then you must have something else you haven't shown that is also causing a problem because this example solves the for loop issue with the cords variable.

Szymon Toda Over a year ago

It should be in every JavaScript newbie book

Barmar · Accepted Answer · 2012-09-09 22:24:33Z

1

Minitech was close, but you have to move the closed variables INSIDE the function:

for (x = 1; x <= 5; x++) {
    for (y = 1; y <= 5; y++) {
        (function() {
            var cords = x + "x" + y;
            var el = document.getElementById(cords);
            el.addEventListener("click", function (e) { B_modeWindow('1', cords); });
        })();
    }
}

answered Sep 9, 2012 at 22:24

Barmar

789k57 gold badges554 silver badges669 bronze badges

6 Comments

jfriend00 Over a year ago

minitech's answer should work just as well. They close over the cords variable which solves the problem.

Barmar Over a year ago

But he's not closing over el, which is also being used in the function.

jfriend00 Over a year ago

el is used ONLY in the actual for loop at the time of execution of the for loop. It is not used in the event handler that runs later so it does not need to be closed over. coords is used in the event handler callback itself (e.g. referenced later at the time the event occurs) so it has to be closed over.

Barmar Over a year ago

Good point (it's so easy to get lost in the mazes of closures, and I even have many years of Lisp experience). I wonder why the OP said it didn't work.

Szymon Toda Over a year ago

This, gentles, is some crazy stuff. Who invented this language?

|

ChaseMedallion · Accepted Answer · 2012-09-09 21:40:48Z

0

The problem is that js variables have function scope, so the cords variable gets rewritten as you go through the loop. Thus all listener functions point to the same variable which ends up with the final value. One solution to this is to create another function that takes el and cords as arguments and adds a cords-based listener to el. Then call this function from your inner loop rather than adding the listener there directly.

answered Sep 9, 2012 at 21:40

ChaseMedallion

22k18 gold badges96 silver badges163 bronze badges

2 Comments

Szymon Toda Over a year ago

Is that what minitech proposed?

Alnitak Over a year ago

@user1656447 no, it's kinda the opposite.

Collectives™ on Stack Overflow

JavaScript closures in for-loop

3 Answers 3

2 Comments

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related