Passing parameters in Javascript onClick event

Passing parameters in Javascript onClick event

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

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 by Jamie Wong for Passing parameters in Javascript onClick event

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 by Richard JP Le Guen for Passing parameters in Javascript onClick event

Try this:

Answer by Ryan Tenney for Passing parameters in Javascript onClick event

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

Is a closure and stores a reference to the variable i, not the value that i holds when the function is created. One solution would be to wrap the contents of the for loop in a function do this:

for (var i = 0; i < 10; i++) (function(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'));  }(i));  

Answer by Nick Craver for Passing parameters in Javascript onClick event

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

Answer by aniri for Passing parameters in Javascript onClick event

or you could use this line:

 link.setAttribute('onClick', 'onClickLink('+i+')');  

instead of this one:

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

Answer by Kiran Kumar Veerabatheni for Passing parameters in Javascript onClick event

Another simple way ( might not be the best practice) but works like charm. Build the HTML tag of your element(hyperLink or Button) dynamically with javascript, and can pass multiple parameters as well.

// variable to hold the HTML Tags   var ProductButtonsHTML  ="";    //Run your loop  for (var i = 0; i < ProductsJson.length; i++){  // Build the  Tag with the required parameters for Onclick call. Use double quotes.    ProductButtonsHTML += "  ";    }    // Add the Tags to the Div's innerHTML.  document.getElementById("divProductsMenuStrip").innerHTML = ProductButtonsHTML;  

Answer by Yeti for Passing parameters in Javascript onClick event

It is probably better to create a dedicated function to create the link so you can avoid creating two anonymous functions. Thus:

Although in both cases you end up with two functions, I just think it is better to wrap it in a function that is semantically easier to comprehend.

Answer by Alex Nolasco for Passing parameters in Javascript onClick event

onclick vs addEventListener. A matter of preference perhaps (where IE>9).

// Using closures  function onClickLink(e, index) {         alert(index);      return false;  }    var div = document.getElementById('div');    for (var i = 0; i < 10; i++) {      var link = document.createElement('a');        link.setAttribute('href', '#');      link.innerHTML = i + '';      link.addEventListener('click', (function(e) {          var index = i;          return function(e) {              return onClickLink(e, index);          }      })(), false);      div.appendChild(link);      div.appendChild(document.createElement('BR'));  }  

How abut just using a plain data-* attribute, not as cool as a closure, but..

function onClickLink(e) {             alert(e.target.getAttribute('data-index'));      return false;  }    var div = document.getElementById('div');    for (var i = 0; i < 10; i++) {      var link = document.createElement('a');        link.setAttribute('href', '#');      link.setAttribute('data-index', i);      link.innerHTML = i + ' Hello';              link.addEventListener('click', onClickLink, false);      div.appendChild(link);      div.appendChild(document.createElement('BR'));  }  

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72