Button Onclick createElement dans une boucle for
Résolu
parousky
Messages postés
325
Date d'inscription
Statut
Membre
Dernière intervention
-
parousky Messages postés 325 Date d'inscription Statut Membre Dernière intervention -
parousky Messages postés 325 Date d'inscription Statut Membre Dernière intervention -
5 réponses
Bonjour
adddEventListener ou pas, ce n'est pas le problème.
Ton problème vient de ce que la variable button est globale.
Quand ton script s'exécute, tu définis des fonctions (return function() { ...) mais tu ne les exécutes pas.
Quand tu cliques sur tes boutons, tes fonction s'exécutent, mais la variable button est restée ce qu'elle était à la fin de l'exécution de ton script : elle représente ton dernier bouton. Le button.id que tu affiches est le même pour tous tes boutons car c'est la même variable : celle de ton script initial.
Pour "capturer" le bouton lors de la définition de la fonction, il faut utiliser une fermeture. Fais des recherches sur "closure javascript" (closure est le mot anglais), tu trouveras des tas d'explications.
En pratique, ça demande une modification très mineure de ton code :
adddEventListener ou pas, ce n'est pas le problème.
Ton problème vient de ce que la variable button est globale.
Quand ton script s'exécute, tu définis des fonctions (return function() { ...) mais tu ne les exécutes pas.
Quand tu cliques sur tes boutons, tes fonction s'exécutent, mais la variable button est restée ce qu'elle était à la fin de l'exécution de ton script : elle représente ton dernier bouton. Le button.id que tu affiches est le même pour tous tes boutons car c'est la même variable : celle de ton script initial.
Pour "capturer" le bouton lors de la définition de la fonction, il faut utiliser une fermeture. Fais des recherches sur "closure javascript" (closure est le mot anglais), tu trouveras des tas d'explications.
En pratique, ça demande une modification très mineure de ton code :
var d = document.getElementById('commentaires');
for(i=0;i<liste.length;i++)
{
var button = document.createElement("button");
button.type = "button";
button.class = "ButtonMFS"+i;
button.id = "ButtonMFS"+i;
button.textContent = ""+liste[i]+"";
button.onclick = (function(monbouton) {
var mail = liste[i];
var Nom = liste[i];
return function() {
console.log(monbouton.id);
}
})(button);
d.appendChild(button);
}
J'ai essayé ton code et ça fonctionne bien, sauf quand je fais un peu de mise en forme !
En fait quand j'ajoute un saut de ligne, ça ne fonctionne plus !
J'ai écris ça :
Et là ça fait comme avant, ça ne fonctionne que pour le dernier bouton !
Comment puis-je faire ?
Merci d'avance !
En fait quand j'ajoute un saut de ligne, ça ne fonctionne plus !
J'ai écris ça :
var d = document.getElementById('commentaires');
for(i=0;i<liste.length;i++)
{
var button = document.createElement("button");
button.type = "button";
button.class = "ButtonMFS"+i;
button.id = "ButtonMFS"+i;
button.textContent = ""+liste[i]+"";
button.onclick = (function(monbouton) {
var mail = liste[i];
var Nom = liste[i];
return function() {
console.log(monbouton.id);
}
})(button);
d.innerHTML+="</br>";
d.appendChild(button);
}
Et là ça fait comme avant, ça ne fonctionne que pour le dernier bouton !
Comment puis-je faire ?
Merci d'avance !
sauf quand je fais un peu de mise en forme
Ce n'est pas de la mise en forme, c'est de la déformation ^^
Soit tu crées tout l'élément d avec des "innerHTML", soit tu manipules le DOM, mais si tu mélanges les deux, il ne faut pas t'étonner des résultats.
D'ailleurs, </br> n'existe pas, c'est <br />.
Remplace
Ce n'est pas de la mise en forme, c'est de la déformation ^^
Soit tu crées tout l'élément d avec des "innerHTML", soit tu manipules le DOM, mais si tu mélanges les deux, il ne faut pas t'étonner des résultats.
D'ailleurs, </br> n'existe pas, c'est <br />.
Remplace
d.innerHTML+="</br>";par
d.appendChild(document.createElement("br"));.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question