Dealing with Javascript variable scope and for-loop or external function.

haveacafe — Tue, 26 Aug 2008 12:44:34 +0000

Sometimes, you need to set some HTML attributes automatically with a batch declaration.
By example imagine you want to set an mouseover over hundred of links, in order to display their title content in an alert box. How to proceed ?

You could try to achieve this using a loop. Something like:
link number 0 link number 1 link number 2 link number 3 link number 4

Just try this tiny snippet: have you seen the problem ?
Every link has a function showing the last value of the i variable!

So, what does happened ?

We start iterating over a integer called i. This variable is in a global socpe. For each element found, we set a new function, wich display the i value. But the variable is passed by raference, and we want it to be passed by value !

Fortunately, we have a solution: we will dynamically add a new Function object, which will result in « statically » defined function.

link number 0 link number 1 link number 2 link number 3 link number 4

The Function constructor allow us to take a String, and declaring it as a function. This tip forces the js interpetor to build the string, and only after, to build the function itself. So we achieve to have a static number written in each function we defined and desired omouseover effect.

For further information about function creation, i should recommend you this page:

www.howtocreate.co.uk/tutorials/javascript/functions

Have a look too, to some article describing the javascript closure:

Haveacafe's Weblog » new Function

Dealing with Javascript variable scope and for-loop or external function.