Discussion :

[moimp]

Bonjour,

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

Code :

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

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:

Uncaught TypeError: del.addEventListener is not a function

[-Nikopol-]

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

Code :

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

1
2
3
4
5
6
7
 
let elmts = document.querySelectorAll('my-elemts');
elmts.forEach( elmt =>{
    elmt.addEventListener('click',()=>{
        //code
    }
});

[javatwister]

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é.

[moimp]

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

Code :

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

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

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.

[melka one]

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.

[moimp]

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.

[javatwister]

Code javascript :

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

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

[moimp]

Merci, c'est impeccable!