Discussion :

[jerome n]

Bonjour,

Je cherche à modifier le comportement onclick d'une liste de boutons HTML, boutons que j'ai créés et enregistrés dans une liste "liste_boutons"
J'aimerais que le fait de cliquer sur un bouton appelle une certaine fonction (la même pour tous les boutons) avec un paramètre indiquant le numéro du bouton utilisé.
J'ai écrit ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
for (i=0;i<liste_boutons.length;i++) { 
       liste_boutons[i].onclick=function() {mafonction(i); }; 
}

Mon problème : à priori i est passé en "référence" et non en valeur (je ne sais pas si le terme est correct)
Bref, tous les boutons appellent "mafonction" avec le même argument : la dernière valeur de i

Y a-t-il un moyen de dire que, dans la boucle, je veux utiliser la valeur précise de i au moment de la boucle et non la variable i elle-même, et donc sa valeur au moment de l'appel (si j'ai bien compris ce qui se passe)

Merci d'avance.

[javatwister]

bonjour,

effectivement, "i" renverra toujours la dernière valeur de la boucle puisque tes clicks ont lieu après chargement du script...
Utilise "this" à la place, il fera référence à l'élément appelant.

Ou sinon, simplifie ton système, sans passer par un tableau (qui fait double emploi avec ta liste d'éléments html);

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="liste">Liste de boutons: </div>

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
for(let i=0;i<5;i++){
	let b=document.createElement("button");
	b.num=i;
	b.textContent="bouton " + i;
	document.getElementById("liste").append(b);
}
document.querySelectorAll("#liste button").forEach(v => 
	v.addEventListener("click",()=> alert(v.num)
))

[jerome n]

Merci pour la réponse.

Je vais regarder comment gérer avec self c'est sans doute ce que je voulais.

[NoSmoking]

Bonjour,
tu peux également forEach pour conserver la valeur de ton indice, pas de surcharge dans ce cas.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
lstBtns.forEach((el, ind) => {
  el.addEventListener("click", () => alert(ind));
});