Button Onclick createElement dans une boucle for Résolu/Fermé

Question

Bonjour, dans une boucle for, je crée un bouton avec createElement() à chaque itération, et j'aimerais associer à chaque bouton une fonction onclick différente.
Le problème, c'est que seul le dernier bouton créé a une fonction associée au clic.
Comme si le onclick était modifié à chaque itération.
Alors j'ai écris ce code très simple là : 

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() {				   var mail = liste[i];			       var Nom = liste[i];           return function() { 		   console.log(button.id);      }   })();   				d.appendChild(button);			}

Où d est un div dans lequel afficher les boutons.
Donc dans ce code précédent, ce n'est que lorsque je clic sur le dernier bouton que son ID apparaît dans la console. 
Comment puis-je contourner ce problème ?
Merci d'avance !

Utilisateur anonyme · Answer

Et en utilisant un addEventListener? Pour voir si il y a toujours le même problème.

Utilisateur anonyme · Answer

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

parousky · Answer

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 : var d = document.getElementById('commentaires'); for(i=0;i

Utilisateur anonyme · Answer

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,
n'existe pas, c'est
. Remplace d.innerHTML+="
"; par d.appendChild(document.createElement("br"));.

parousky · Answer

Ca marche impeccable merci beaucoup !

Button Onclick createElement dans une boucle for

5 réponses

Discussions similaires