Passage de paramètres dans l'événement Javascript onClick

Question

J'essaie de passer un paramètre dans l'événement onclick. Vous trouverez ci-dessous un exemple de 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>

Cependant, lorsque je clique sur l'un des liens, l'alerte indique toujours "Lien 10 cliqué" !

Quelqu'un peut-il me dire ce que je fais mal ?

Gracias

Answer 1

Cela se produit parce que le i se propage vers le haut de la portée une fois que la fonction est invoquée. Vous pouvez éviter ce problème en utilisant une fermeture.

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'));
}

Ou si vous voulez une syntaxe plus concise, je vous suggère d'utiliser la solution de Nick Craver.

Answer 2

Cela se produit parce qu'ils font tous référence au même i qui change à chaque boucle, et laissée en tant que 10 à la fin de la boucle. Vous pouvez le résoudre en utilisant une fermeture comme celle-ci :

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

Vous pouvez l'essayer ici

Ou, faites this est le lien sur lequel vous avez cliqué dans ce gestionnaire, comme ceci :

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

Vous pouvez essayer cette version ici

Answer 3

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

est une fermeture et stocke une référence à la variable i et non la valeur que i tient lorsque la fonction est créée. Une solution serait d'envelopper le contenu de la fonction for boucle dans une fonction faire ceci :

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 4

Essayez ça :

<div id="div"></div>

<script language="javascript" type="text/javascript">
   var div = document.getElementById('div');

   for (var i = 0; i < 10; i++) {
       var f = function() {
           var link = document.createElement('a');
           var j = i; // this j is scoped to our anonymous function
                      // while i is scoped outside the anonymous function,
                      //  getting incremented by the for loop
           link.setAttribute('href', '#');
           link.innerHTML = j + '';
           link.onclick=  function() { onClickLink(j+'');};
           div.appendChild(link);
           div.appendChild(document.createElement('br')); // lower case BR, please!
       }(); // call the function immediately
   }

   function onClickLink(text) {
       alert('Link ' + text + ' clicked');
       return false;
   }
</script>

Answer 5

Ou vous pouvez utiliser cette ligne :

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

au lieu de celui-ci :

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