Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at CFUNITED 2009 (Lansdowne, VA) with:

Dereferencing Javascript Variables in Dynamic Methods

By Ben Nadel on

There is one problem in Javascript that I cannot seem to get a handle on and it is killling me! I can't seem to get variables to pass by value as I would hope. Take the following example:

for (var intI = 0 ; intI < 10 ; intI++){
var objA = document.createElement( "div" );

// Set the click for the link.
objA.onclick = function(){ alert( intI ); };

// Set the link into the body div.
objDiv.appendChild( objA );
}

Now, in my head, each one of those links, when clicked should alert the appropriate intI value (0, 1, 2, 3, etc.); however, each of them will alert 10 which is the value that broke the FOR loop. It's like they all point to one variable and then get updated for each loop of the FOR iteration.

I can't seem to find a good solution to this. One method that seems to work, but is poop is something along the lines of:

// Define a function INSIDE this function.
function GetI( intX ){
return(
function(){ alert(intX); };
);
}

for (var intI = 0 ; intI < 10 ; intI++){
var objA = document.createElement( "div" );

// Set the click for the link.
objA.onclick = GetI( intX );

// Set the link into the body div.
objDiv.appendChild( objA );
}

This method works as would be expected, though I seem to think that it is doing the exact same thing. It must be something to do with the scoping. Since the intI value is getting passed to a local scope (int GetI()), and then getting passed back, it must be unique (since the local scope of the GetI() method is created unique of each FOR iteration.

This solution seems truly ganky to me. There has to be a better way. And this is just a simple example. I have many places where I want to be doing this with object reference and dynamic event handling. This one simple bumb is really holding me back!



Looking For A New Job?

100% of job board revenue is donated to Kiva. Loans that change livesFind out more »

Reader Comments

for (var intI = 0 ; intI < 10 ; intI++){
var objA = document.createElement( "div" );
var thisI = intI;

// Set the click for the link.
objA.onclick = function(){ alert( thisI ); };

// Set the link into the body div.
objDiv.appendChild( objA );
}

Reply to this Comment

@TC,

Won't you still run into the same problem since "thisI" is not re-var'd on each iteration (all var commands are actually run at the top)? Seems like you'd run into the same problem.

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.