Button Onclick createElement dans une boucle for

Résolu/Fermé

parousky Messages postés 325 Date d'inscription mardi 11 septembre 2012 Statut Membre Dernière intervention 20 février 2022 - 6 mai 2015 à 18:04
parousky Messages postés 325 Date d'inscription mardi 11 septembre 2012 Statut Membre Dernière intervention 20 février 2022 - 14 mai 2015 à 16:43

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 !

A voir également:

Document.createelement button onclick
Gold button paris avis - Forum Consommation & Internet
Html zoom image onclick ✓ - Forum Webmastering
Hp wireless button driver c'est quoi - Forum Logiciels
Onclick js ✓ - Forum Javascript
Medion bios button - Forum Windows 10

5 réponses

Réponse 1 / 5

Utilisateur anonyme
7 mai 2015 à 12:16

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

Réponse 2 / 5

Utilisateur anonyme
Modifié par le père. le 7/05/2015 à 14:08

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

Réponse 3 / 5

parousky Messages postés 325 Date d'inscription mardi 11 septembre 2012 Statut Membre Dernière intervention 20 février 2022 6
13 mai 2015 à 12:59

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<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 !

Réponse 4 / 5

Utilisateur anonyme
13 mai 2015 à 14:22

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

d.innerHTML+="</br>";

par

d.appendChild(document.createElement("br"));

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

parousky Messages postés 325 Date d'inscription mardi 11 septembre 2012 Statut Membre Dernière intervention 20 février 2022 6
14 mai 2015 à 16:43

Ca marche impeccable merci beaucoup !

Discussions similaires

Home sur clavier azerty

Power Button Lockout...

[NFS Rivals] Problème touche pg.prec

Télécommande

Ecran IIyama GB2773HS-2 OSD Vérrouillé

Discussions similaires

Newsletters