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

**URL:** <https://forum.kirupa.com/t/problem-found-on-creating-elements-dynamically-in-a-for-loop/280931>\
**Category:** Uncategorized\
**Created:** [February 3, 2009, 3:34am UTC](https://forum.kirupa.com/t/problem-found-on-creating-elements-dynamically-in-a-for-loop/280931 "2009-02-03T03:34:13Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Paradise\_Wolf](https://avatars.discourse-cdn.com/v4/letter/p/85e7bf/32.png) [@Paradise\_Wolf](https://forum.kirupa.com/u/Paradise_Wolf)\
**Post date:** [February 3, 2009, 3:34am UTC](https://forum.kirupa.com/t/problem-found-on-creating-elements-dynamically-in-a-for-loop/280931/1 "2009-02-03T03:34:13Z")

</div>

**[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]**