Problem found on creating elements dynamically in a “for” loop

1

[COLOR=black][FONT=Arial]In the below code, the created link element (ap) correctly displays the right customer number in the instruction “[/FONT][/COLOR][COLOR=blue][FONT=Arial]ap.href=“javascript:CallCustomer(”+i+")";[/FONT][/COLOR][COLOR=black][FONT=Arial]” but it displays the wrong icon number in the instruction “[/FONT][/COLOR][COLOR=blue][FONT=Arial]ap.onmouseover= function(){ t.innerHTML = "icon " + i};”. [/FONT][/COLOR][COLOR=black][FONT=Arial]It always shows the last value of “i” in the for loop plus 1, no matter what link the mouse is over.[/FONT][/COLOR]

[COLOR=black][FONT=Arial]How to fix it ?[/FONT][/COLOR]

[COLOR=blue][FONT=Arial]function init()[/FONT][/COLOR]
[COLOR=blue][FONT=Arial]{[/FONT][/COLOR]

[COLOR=blue][FONT=Arial] t = document.getElementById(“test”); [/FONT][/COLOR]

[COLOR=blue][FONT=Arial] ctn = document.getElementById(‘container’);[/FONT][/COLOR]

[COLOR=blue][FONT=Arial] for( var i= 0; i < total_icons; i++)[/FONT][/COLOR]
[COLOR=blue][FONT=Arial] {[/FONT][/COLOR]
[COLOR=blue][FONT=Arial] var newdiv = document.createElement(‘div’);[/FONT][/COLOR]
[COLOR=blue][FONT=Arial] var divIdName = ‘icon_pos’+i;[/FONT][/COLOR]
[COLOR=blue][FONT=Arial] newdiv.setAttribute(‘id’,divIdName);[/FONT][/COLOR]

[COLOR=blue][FONT=Arial] ctn.appendChild(newdiv);[/FONT][/COLOR]

[COLOR=blue][FONT=Arial] var alink = document.createElement(‘a’);[/FONT][/COLOR]
[COLOR=blue][FONT=Arial] var aIdName = ‘alink’+i;[/FONT][/COLOR]
[COLOR=blue][FONT=Arial] alink.setAttribute(‘id’,aIdName);[/FONT][/COLOR]

[COLOR=blue][FONT=Arial] newdiv.appendChild(alink);[/FONT][/COLOR]

[COLOR=blue][FONT=Arial]var ap = document.getElementById(‘alink’+i);[/FONT][/COLOR]

[COLOR=red][FONT=Arial] ap.href = “javascript:CallCustomer(”+i+")";[/FONT][/COLOR]

[COLOR=red][FONT=Arial]ap.onmouseover= function(){ t.innerHTML = "icon " + i};[/FONT][/COLOR]

[COLOR=blue][FONT=Arial] var icon_img = document.createElement(‘IMG’);[/FONT][/COLOR]

[COLOR=blue][FONT=Arial] var imIdName = ‘icon’+i;[/FONT][/COLOR]

[COLOR=blue][FONT=Arial] icon_img.setAttribute(‘id’, imIdName);[/FONT][/COLOR]

[COLOR=blue][FONT=Arial] alink.appendChild(icon_img);[/FONT][/COLOR]

[COLOR=blue][FONT=Arial] }[/FONT][/COLOR]

[COLOR=blue][FONT=Arial] //…[/FONT][/COLOR]

**[COLOR=blue][FONT=Arial] }[/FONT][/COLOR]**

[COLOR=blue][FONT=Arial]function CallCustomer( number )[/FONT][/COLOR]
[COLOR=blue][FONT=Arial]{[/FONT][/COLOR]
[COLOR=blue][FONT=Arial] alert("You called Customer "+number);[/FONT][/COLOR]

[COLOR=blue][FONT=Arial]}[/FONT][/COLOR]