Dynamic variables in attachEvent

[comicgeekspeak]

Hi there,

I am trying to write a loop that will add 10 divs to the screen. Each
div will have an onclick event. The function that will be called
onclick requires a parameter. That parameter is dynamic based on the
index of the loop. In Firefox this is no problem. However in IE I get
some results that I wouldn't expect.

Here is my code:

for(var i = 0; i < 10; i++)
{
var linename = jsonObj.lines[i].line;
var childcountid = jsonObj.lines[i].childcount;
var lineid = jsonObj.lines[i].lineid;

var newdiv = document.create Element('div');
newdiv.setAttri bute("id","main " + i);
if (navigator.appN ame == "Microsoft Internet Explorer")
{
//************ this is the problem area
*************** **
newspan.attachE vent("onclick", function() {getCategories( 'main' +
i)});
}
else
{
newspan.setAttr ibute("onclick" , "getCategories( 'main" + i + "')");
}
document.getEle mentById('conta iner').appendCh ild(newdiv);
}

What happens is when the element is clicked the parameter being passed
to getCategories is always 'main9' IE always grabs the current value
of i, not the value of i at the stage of the loop that attachEvent was
called.

I'm going out of my mind trying to figure this out. Please, any help
will be greatly appreciated.

Bryan

[Martin Honnen]

co************@ gmail.com wrote:

for(var i = 0; i < 10; i++)
{
var linename = jsonObj.lines[i].line;
var childcountid = jsonObj.lines[i].childcount;
var lineid = jsonObj.lines[i].lineid;

var newdiv = document.create Element('div');
newdiv.setAttri bute("id","main " + i);

newdiv.onclick = new Function ("evt", "getCategories( 'main" + i
+ "');");
is one way, another is
newdiv.onclick = function (n) {
return function (evt) { getCategories(' main' + n); };
}(i);
--

Martin Honnen
http://JavaScript.FAQTs.com/