Avant de lire: oui c'est une question commune. Cependant, aucun d'entre eux n'a résolu mon problème, et qu'aucun / presque personne n'a utilisé une boucle, ce qui cause des problèmes pour moi.
Mon code crée 5 divs qui obtiennent tous leur propre identifiant et devraient obtenir leur propre auditeur unique. Mais l'ajout d'événements avec un argument ne fonctionne pas comme je le souhaite.
Pour obtenir la sortie correcte lorsque vous appuyez sur l'élément OnClick, je dois transmettre une dispute avec la fonction exécutée onclick. Jetez un coup d'œil au code.
J'ai vu beaucoup d'autres personnes ayant ce problème, mais aucun d'entre eux n'a résolu cela. J'ai essayé ceci (fonction anonyme): Cependant, sur tous les auditeurs d'événements, je reçois une dispute avec la valeur 6, ce qui signifie que je ne reçois pas individuellement onclicks pour les divs (mon but). Tous les éléments OnClick renvoient "six" dans la console. ici:
https://jsfiddle.net/nbps7mdr/3/ Qu'est-ce que je Attendez-vous: Lorsque je clique sur la DIV avec le numéro 1, je reçois "une" dans la console.
Je ne m'attends pas à obtenir de "six" du tout, car le numéro maximum devrait être 5. Il y a quelque chose de problème qui signifie que 6 est envoyé avec i.
3 Réponses :
Essayez de changer de boucle pour utiliser un laisser code>. De cette façon, il sera bloqué sur scopé au lieu de scoper à la fonction enfermante. for (let i = 1; i < 6; i++) {
var div = document.createElement("div");
div.setAttribute("id", "i"+i);
div.setAttribute("class", "test-item");
div.innerHTML = i;
div.addEventListener("click", function() {
calc(i);
}, false);
document.querySelector(".testContainer").appendChild(div);
}
Ça a marché! Que voulez-vous dire avec le bloc étant scopé et "Fonction enfermer"?
@Marcus, je vous encourageais à jeter un coup d'oeil à la Page MDN . Fondamentalement, i sera scopé à la boucle pour la boucle, au lieu de globalement. Scoping variable à JavaScript est un sujet massif, je vous encourage donc à faire des recherches sur celle-ci :)
Un peu d'un diabme ici, je ne sais pas si cela fonctionnera pour vous. Ajout de l'événement param et ref au texte. Ensuite, parseint dans le func.
p>
<div class="testContainer"></div>
Veuillez essayer la solution suivante. Et regardez le commentaire de Charlie Fish sur la portée
P>
<div id="root"></div>
Cela concerne la portée de votre variable
i . Parce que la boucle pour la boucle est complète avant de cliquer sur l'un des boutons,i sera 6.