Erreur "is not a function" dans un écouteur

Bonjour,

Dans le code suivant, j'ai une erreur que je ne comprends pas:

Code:

---

1 2 3 4 5 6 7 8 9 10

// Warning before deleting an user const del = window.document.querySelectorAll("[src='images/del.png']");   del.addEventListener('click', function(e) { let result = confirm("Etes-vous sûr de vouloir supprimer cet utilisateur ?"); if (result) del.form.submit(); else e.preventDefault(); }, false );

---

Note: L'image figure à chaque ligne d'un tableau d'utilisateur.
J'ai l'erreur suivante:

Citation:

---

Uncaught TypeError: del.addEventListener is not a function

---

.querySelectorAll te renvoie un tableau (HTML collection) il te faut donc faire une boucle pour ajouter un listener à chacun des éléments

Code:

---

1 2 3 4 5 6 7

let elmts = document.querySelectorAll('my-elemts'); elmts.forEach( elmt =>{ elmt.addEventListener('click',()=>{ //code } });

---

Mais si tu n'as qu'un élément correspondant au sélecteur, document.querySelector suffit;
D'ailleurs, si tu as plusieurs boutons-image, je ne vois pas comment tu indiques "quel utilisateur" va être supprimé.

Citation:

---

Envoyé par -Nikopol-

.querySelectorAll te renvoie un tableau (HTML collection) il te faut donc faire une boucle pour ajouter un listener à chacun des éléments

Code:

---

1 2 3 4 5 6 7

let elmts = document.querySelectorAll('my-elemts'); elmts.forEach( elmt =>{ elmt.addEventListener('click',()=>{ //code } });

---

---

Merci pour cette explication qui fonctionne. Par contre, j'ai du mal avec les fonctions fléchées et, malgré les explications de MDN, je n'arrive pas à transcrire mon code de façon plus classique.

@javatwister

Citation:

---

D'ailleurs, si tu as plusieurs boutons-image, je ne vois pas comment tu indiques "quel utilisateur" va être supprimé.

---

J'utilise tout simplement un dataset pour chaque image.

jour

si tu ne suis pas la mode a de rare cas rien ne t'oblige a utiliser les fonction fléché qui plus est peuvent êtres déroutantes

personnellement je trouve que les fonction fléché tout comme les fonctions anonyme on tendance a donner un code difficilement compréhensible une fonction devrait toujours avoir un nom afin de savoir a quoi elle correspond et ne pas être englobé dans un congloméra de code.

Merci pour ta réponse mais je n'arrive toujours pas à remplacer la fonction fléchées donnée par @-Nikopol- par un code plus compréhensible.

Code:

---

1 2 3 4 5 6 7 8

for(let i in del){ del[i].addEventListener('click', function(e) { if (confirm("Etes-vous sûr de vouloir supprimer cet utilisateur ?")){ del[i].form.submit() } else e.preventDefault(); }, false) }

---

Merci, c'est impeccable!