How do I use the value of a variable at declaration time in a JavaScript anonymous function?

Question

This is a really basic question but...

I have some code like this

var arr = Array('blah.jpg','ha.jpg');
for (var i=0; i<array.length; i++)
{
    $('div#blah' + i).click(function() {
           $('img').attr('src', arr[i]); });
}

This should bind the div with id="blah0" to change all images to 'blah.jpg' when clicked. Similarly, clicking the div with id ="blah1" should change all images to 'ha.jpg'.

However, the anonymous function won't work because it will use the value of 'i' at the time of execution, i.e. 2. This means that clicking either div will try and set all images to arr[2] - a non-existent element (interestingly not throwing a JS error on my machine but that's another story...).

How can I get the anonymous function to be created using the value of 'i' at declaration time?

As a simpler example:

for (var i=0; i<10; i++)
{
    $('div#blah'+i).click(function() {
       alert(i)); });
}

This should display '0' when I click 'blah0', '1' when I click 'blah1' etc.

However, by default it will display '10' no matter which 'blah' i click.

Matthew Crumley · Accepted Answer · 2008-11-21 04:05:52Z

5

Declare a new variable inside a function that creates a new click handler that gets the current value of i as a parameter:

function makeClickHandler(arr, local_i) {
    return function() {
        $('img').attr('src', arr[local_i]);
    };
}

var arr = Array('blah.jpg','ha.jpg');
for (var i=0; i<array.length; i++)
{
    $('div#blah' + i).click(makeClickHandler(arr, i));
}

Each instance of the function gets its own copy of local_i, that doesn't change each time.

edited Nov 21, 2008 at 4:05

answered Nov 21, 2008 at 3:55

Matthew Crumley

103k24 gold badges105 silver badges131 bronze badges

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

Comments

ThiefMaster · Accepted Answer · 2011-04-06 20:12:37Z

4

In this particular case you should be using a closure:

for (var i=0; i<10; i++)
{
    (function(j){
        $('div#blah'+j).click(function() { alert(j)); });
    })(i);        
}

(function(){ /* code */ })() denotes a self executing function, which implies that it will use and evaluate the value of i immediately in the loop as opposed to at click time.

edited Apr 6, 2011 at 20:12

ThiefMaster

320k85 gold badges608 silver badges648 bronze badges

answered Nov 21, 2008 at 4:53

Darko

39k15 gold badges85 silver badges107 bronze badges

Comments

shahkalpesh · Accepted Answer · 2008-11-21 03:53:24Z

0

Have 1 more variable inside the loop and increment it after using it in the closure.


var j = 0;
for (var i=0; i<array.length; i++)
{
    $('div#blah' + j).click(function() {
           $('img').attr('src', arr[i]); });

    j++;
}

answered Nov 21, 2008 at 3:53

shahkalpesh

33.6k4 gold badges66 silver badges89 bronze badges

3 Comments

Matt Mitchell Over a year ago

The problem isn't binding (i.e. 'div#blah' + j) but the array access (i.e. arr[i]). In the method you use, there will be no difference at all - the click will still call call the 'i'th element of arr using the value of i at that time (e.g. array.length) not the value of i when i made the function

shahkalpesh Over a year ago

While I don't understand much of closure, you could let the click to call a single function & check the Event.Src (which will give you div1, div2 or div3), extract the id from it and based on that set the image source.

Matt Mitchell Over a year ago

Your second option could probably work. Not sure on new function() {}.

Matt Mitchell · Accepted Answer · 2008-11-21 04:03:04Z

0

I have this answer so far but bit of a hack:

var arr = Array('blah.jpg','ha.jpg');
for (var i=0; i<array.length; i++)
{
    eval("$('div#blah' + i).click(function() { $('img').attr('src', arr[" + i + "]); })");
}

Also:

for (var i=0; i<10; i++)
{
    eval("$('div#blah'+i).click(function() { alert(" + i + ")); });");
}

answered Nov 21, 2008 at 4:03

Matt Mitchell

42k35 gold badges122 silver badges186 bronze badges

1 Comment

Matt Mitchell Over a year ago

Could also use the multiline hack as here forums.whirlpool.net.au/forum-replies-archive.cfm/487804.html if too long to single line eval.

Collectives™ on Stack Overflow

How do I use the value of a variable at declaration time in a JavaScript anonymous function?

4 Answers 4

Comments

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related