Argument d'une fonction onclick dans éléments créés en boucle

Version imprimable

Salut salut !

Je bloque sur un souci, qui semble assez simple :

Utilisant leaflet (API géo), je souhaite créer des zones intéractives,
Sauf que chaque zone est créée en js, dans une boucle utilisant des données stockées dans un tableau.

Je souhaite passer dans la fonction onclick un argument différent pour chaque zone (un peu normal il semble :mouarf:)
J'ai essayé pas mal de choses, mais je bloque complet...
Extrait de code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
for (i = 0; i < NbParcelles; i++) 
                {
                //console.log('I '+i);
                var CoordsString;
                var nom = parcelles[i][0];// tableau [i][x], avec pourx : 0 = nom ; 1 = coordonnées (array)
                var coords = parcelles[i][1];
                //console.log ("coords " +coords);
				//console.log ("coords{1] " +coords);
                zone.lenght = i;
                try {
                zone[i]= L.polygon(coords,{
                        color: 'green',
                        weight: 10,
                        opacity: 0.7})
 
						.addTo(map);
 
//-----------C'est là que je n'arrive pas à trouver la bonne formule---------
				zone[i].addEventListener(
				"click",
				function(){selectionner(nom)});
 
				}// ne marche pas (lance la fonction avec le dernier "nom" de la boucle)
				catch{"souci pour "+ nom}
 
                } //fin for i  
 
 
 
		 function selectionner(id_sel){
		console.log("sélection : "+ id_selection);
		document.getElementById("nom_selection")="Sélec    : <b>"+id_sel+"</b>";   
 
 	  }

Merci d'avance pour votre aide !!:zoubi:

Salut

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
			for (i = 0; i < NbParcelles; i++) 
                {
					//console.log('I '+i);
					var CoordsString;
					var nom = parcelles[i][0];// tableau [i][x], avec pourx : 0 = nom ; 1 = coordonnées (array)
					var coords = parcelles[i][1];
					//console.log ("coords " +coords);
					//console.log ("coords{1] " +coords);
					zone.lenght = i;
					try {
							zone[i]= L.polygon(coords,{
								color: 'green',
								weight: 10,
								opacity: 0.7})
							.addTo(map).on('click', selectionner(nom));
					}
					catch{"souci pour "+ nom}
 
                } //fin for i  
 
			function selectionner(id_sel){
				console.log("sélection : "+ id_selection);
				document.getElementById("nom_selection")="Sélec    : <b>"+id_sel+"</b>";   
			}

il me semble.

Salut Prog,

Merci de ton aide !
Alors là ça me fait un truc incompréhesible lors du test : la fameuse fonction "selectionner()" se lance lors de la création de la page pour TOUS les noms, puis zones incliquables :calim2:

Une idée ? Je fouille de mon côté
Code testé

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
        var zone=new Array();
        var NbParcelles = parcelles.length;
        console.log('nb parcelles'+NbParcelles);
        for (i = 0; i < NbParcelles; i++) 
                {
                //console.log('I '+i);
                var CoordsString;
                var nom = parcelles[i][0];// tableau [i][x], avec pourx : 0 = nom ; 1 = coordonnées (array)
                var coords = parcelles[i][1];
                //console.log ("coords " +coords);
				//console.log ("coords{1] " +coords);
                zone.lenght = i;
                try {
                zone[i]= L.polygon(coords,{
                        color: 'green',
                        weight: 10,
                        opacity: 0.7})
 
						.addTo(map)
						.on('click', selectionner(nom));
 
				}
				catch{"souci pour "+ nom}
 
                } //fin for i  
 
 
 
		 function selectionner(id_sel){
		console.log("sélection : "+id_sel);
		document.getElementById('nom_selection').innerHTML="Sélec    : <b>"+id_sel+"</b>";   
		 }

10/05/2020, 17h51
Farmer64

Résolu

Euh pardon,
Auto résolution developpez.com
https://javascript.developpez.com/fa...lick.dynamique

Je suis pas le premier à être planté :ptdr:
Merci à la communauté !

Re

L'important étant que ton problème est résolut, il me semble bien que tu pouvais faire aussi

Code:

1
2
3
4
5
6
7
zone.push(L.polygon(coords,{
                        color: 'green',
                        weight: 10,
                        opacity: 0.7})
 
						.addTo(map)
						.on('click', selectionner(nom)));

Bonjour,

Citation:

Envoyé par ProgElecT

il me semble bien que tu pouvais faire aussi

:nono: en faisant de la sorte au moment de l'affectation sur l'événement onclick tu exécutes la fonction, remplace ta fonction selectionner(nom) par un console.log(nom) et regarde ce qui se passe dans la console.

Citation:

Envoyé par Farmer64

Auto résolution developpez.com
https://javascript.developpez.com/fa...lick.dynamique

La faq est un peu ancienne et mériterait d'être mise à jour, mais je vois qu'elle est encore utille :applo:

Concernant ton soucis tu peux régler cela d'une « manière plus moderne » :D

Quelque chose comme, à tester :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 const zone = []; parcelles.forEach((parcelle) => { const nom = parcelle[0]; const coords = parcelle[1]; zone.push(L.polygon(coords, { color: 'green', weight: 10, opacity: 0.7 }) .on('click', () => { selectionner(nom) }) .addTo(map)); });

10/05/2020, 19h12
ProgElecT

Citation:

Envoyé par NoSmoking

Bonjour,

Citation:

Envoyé par ProgElecT

il me semble bien que tu pouvais faire aussi

:nono: en faisant de la sorte au moment de l'affectation sur l'événement onclick tu exécutes la fonction, remplace ta fonction selectionner(nom) par un console.log(nom) et regarde ce qui se passe dans la console.

:oops:, a vrai dire j'ai repris une ligne de code perso

Code:

markerArray.push(L.marker(latlng1,{icon:DessIcon,title:TitleMarqueur,alt:QRZaff,riseOnHover:true}).on('click', onClickMarqueur).addTo(carte));

Ben là il n'y a pas exécution de la fonction, la différence ... , la fonction affectée n'attend pas d'argument, et .... il n'y a pas d’exécution à chaque tour dans la boucle.
Merci de l'information, j'ai encor appris quelque chose.

Citation:

Ben là il n'y a pas exécution de la fonction, la différence ... ,
et .... il n'y a pas d’exécution à chaque tour dans la boucle.

dans ton cas tu passes la référence de la fonction à exécuter sur le clic, donc il n'y a pas de soucis, et c'est une bonne chose attendu que si tu as 1000 éléments à traiter cela t'évites de créer 1000 fonctions en mémoire.

Dans la mesure où tu as besoin de passer des arguments, tu peux toujours « attacher » ces paramètres à l'objet à traiter, un peu dans l'esprit de ce que dit la faq, exemple :
Code:

1 2 3 4 5 6 7 datas.forEach((data) => { L.marker(Object.values(data.position), { "data": data // on stocke les données nécessaires }) .on("click", actionSurClic) // on passe la référence de la foncion à exécuter .addTo(this.myMap) });
il suffit d'avoir une fonction actionSurClic déclarée, par exemple :
Code:

1 2 3 4 function actionSurClic(e) { const obj = e.target; // récup. de l'élément cliqué console.log("Objet cliqué :", obj); }
et tu as accès à toutes les données contenues dans obj.data.

11/05/2020, 13h14
Farmer64

Merci :-)

Merci à tous pour les amendements !!
Petite précision, j'avais bien trouvé le système function actionSurClic(e), mais pas utilisé car une question existentielle me bloquait (et doit sans doute en gêner plus d'1): A quoi correspond ce e qui est en argument ?
++
11/05/2020, 15h59
NoSmoking

Citation:

A quoi correspond ce e qui est en argument ?

l'argument e est l'argument passé à la fonction de rappel, le listener, c'est un objet Event, paramètre unique, qui contient toutes les informations sur l'événement venant de se produire.

Il est souvent intéressant de placer un console.log(e) en entrée de fonction pour voir ce dont on dispose.