JavaScript: For loop issue

Question

I have 3 .a and a function that is supposed to alert the number [0, 1 or 2] .a belongs to when it is mouseover-ed:

function a(){
    for(var c=0; c<3; c++){
        alert(c);
        $('.a:eq('+c+')').mouseover(function(){alert(c)});       
    }

}

When I execute it, the first alert(c) is triggered three times and the message is "0", "1" ,"2" respectively, as expected.

However, when mouseover .a, no matter which .a it is, it alerts "3".

http://jsfiddle.net/f6tQn/

I would appreciate if someone can explain why this is happening and provide a solution.

possible duplicate of [jQuery for loop dynamic value](http://stackoverflow.com/questions/7757994/jquery-for-loop-dynamic-value) — DCoder, May 21 '12 at 19:29
possible duplicate of [Closures in a for loop](http://stackoverflow.com/questions/2192348/closures-in-a-for-loop) — kevingessner, May 21 '12 at 19:29

score 5 · Answer 1 · edited May 23 '17 at 12:04

Because c=3.

Your loop adds 1 to C each time it runs, C still equals 3 after the code is run, giving your alerts the value of C, which is 3.

Your example can be completely rewritten and simplified as

$('.a').mouseover(function(){
    alert($(this).index());
});

this will generate an alert for all elements with class a, and give their position in the array that $('.a') generates.

BTW: JSLint errors when putting functions in a loop, if you want to keep JSLint happy check out this Question

score 1 · Answer 2 · answered May 21 '12 at 19:29

1

You're getting caught by function scoped variables in javascript. This is a big javascript gotcha.

You need to create a function that does what you want the body of your for loop to do and takes c as a parameter.

answered May 21 '12 at 19:29

MushinNoShin

4,695
2
32
46

Robert Beuligmann · Answer 3 · 2012-05-21T19:38:09.277

1

C is bound to the same physical location in memory, so when you run the alert with the mouseover it is pulling from the last set value which is 3.

Your actually creating a 'closure' over the variable c if you feel like doing some deeper reading on the subject.

Try this

function a(){
    for(var c=0; c<3; c++){
        alert(c);
        (function(a){
           $('.a:eq('+a+')').mouseover(function(){alert(a)});
        })(c);      
    }

}

edited May 21 '12 at 19:38

answered May 21 '12 at 19:30

Robert Beuligmann

1,434
10
13

1

You needed `()` around the `function(a){...}(c)`. I fixed it for ya. – gen_Eric May 21 '12 at 19:36

score 1 · Accepted Answer · answered May 21 '12 at 19:35

This is happening because each of your mouseover functions are using the same value of c, which is 3 when the loop is done.

You need to make a closue to "capture" the value of c for each iteration.

function a(){
    for(var c=0; c<3; c++){
        alert(c);
        var func = function(c){
            return function(){ // closes around the current value of "c"
                alert(c);
            };
        };
        $('.a:eq('+c+')').mouseover(func(c));       
    }
}

DEMO: http://jsfiddle.net/vDbu3/

JavaScript: For loop issue

4 Answers4