Passing parameters in Javascript onClick event

Question

I'm trying to pass a parameter in the onclick event. Below is a sample code:

<div id="div"></div>  <script language="javascript" type="text/javascript">    var div = document.getElementById('div');     for (var i = 0; i < 10; i++) {        var link = document.createElement('a');        link.setAttribute('href', '#');        link.innerHTML = i + '';        link.onclick=  function() { onClickLink(i+'');};        div.appendChild(link);        div.appendChild(document.createElement('BR'));        }     function onClickLink(text) {        alert('Link ' + text + ' clicked');        return false;        }     </script> 

However whenever I click on any of the links the alert always shows 'Link 10 clicked'!

Can anyone tell me what I'm doing wrong?

Thanks

Answer 1

This happens because the i propagates up the scope once the function is invoked. You can avoid this issue using a closure.

for (var i = 0; i < 10; i++) {    var link = document.createElement('a');    link.setAttribute('href', '#');    link.innerHTML = i + '';    link.onclick = (function() {       var currentI = i;       return function() {            onClickLink(currentI + '');       }    })();    div.appendChild(link);    div.appendChild(document.createElement('BR')); } 

Or if you want more concise syntax, I suggest you use Nick Craver's solution.

Answer 2

This is happening because they're all referencing the same i variable, which is changing every loop, and left as 10 at the end of the loop. You can resolve it using a closure like this:

link.onclick = function(j) { return function() { onClickLink(j+''); }; }(i); 

You can give it a try here

Or, make this be the link you clicked in that handler, like this:

link.onclick = function(j) { return function() { onClickLink.call(this, j); }; }(i); 

You can try that version here