Passage de paramètres dans l'événement Javascript onClick
J'essaie de passer un paramètre dans l'événement onclick. Voici 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, chaque fois que je clique sur l'un des liens, l'alerte affiche toujours "Lien 10 cliqué"!
Quelqu'un peut-il me dire ce que je fais mal?
Merci
Cela se produit parce que le i propage la portée une fois la fonction 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.
Cela se produit car ils font tous référence à la même variable i, qui modifie chaque boucle, et laissée comme 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);
Ou, faites de this le lien sur lequel vous avez cliqué dans ce gestionnaire, comme ceci:
link.onclick = function(j) { return function() { onClickLink.call(this, j); }; }(i);
link.onclick = function() { onClickLink(i+''); };
Est une fermeture et stocke une référence à la variable i, pas à la valeur que i contient lorsque la fonction est créée. Une solution serait d'envelopper le contenu de la boucle for dans une fonction:
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));
Un autre moyen simple (peut-être pas la meilleure pratique) mais fonctionne comme un charme. Créez dynamiquement la balise HTML de votre élément (hyperLink ou Button) avec javascript, et pouvez également passer plusieurs paramètres.
// variable to hold the HTML Tags
var ProductButtonsHTML ="";
//Run your loop
for (var i = 0; i < ProductsJson.length; i++){
// Build the <input> Tag with the required parameters for Onclick call. Use double quotes.
ProductButtonsHTML += " <input type='button' value='" + ProductsJson[i].DisplayName + "'
onclick = \"BuildCartById('" + ProductsJson[i].SKU+ "'," + ProductsJson[i].Id + ")\"></input> ";
}
// Add the Tags to the Div's innerHTML.
document.getElementById("divProductsMenuStrip").innerHTML = ProductButtonsHTML;
Il est probablement préférable de créer une fonction dédiée pour créer le lien afin d'éviter de créer deux fonctions anonymes. Ainsi:
<div id="div"></div>
<script>
function getLink(id)
{
var link = document.createElement('a');
link.setAttribute('href', '#');
link.innerHTML = id;
link.onclick = function()
{
onClickLink(id);
};
link.style.display = 'block';
return link;
}
var div = document.getElementById('div');
for (var i = 0; i < 10; i += 1)
{
div.appendChild(getLink(i.toString()));
}
</script>
Bien que dans les deux cas, vous vous retrouvez avec deux fonctions, je pense simplement qu'il vaut mieux l'encapsuler dans une fonction qui est sémantiquement plus facile à comprendre.
Essaye ç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>
ou vous pouvez utiliser cette ligne:
link.setAttribute('onClick', 'onClickLink('+i+')');
au lieu de celui-ci:
link.onclick= function() { onClickLink(i+'');};
onclick vs addEventListener. Une question de préférence peut-être (où 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'));
}
Comment juste utiliser un simple attribut data- *, pas aussi cool qu'une fermeture, mais ..
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'));
}