Discussion :

[Farmer64]

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 )
J'ai essayé pas mal de choses, mais je bloque complet...
Extrait de code

Code :

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

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 !!

[ProgElecT]

Salut

Code :

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

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.

[Farmer64]

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

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

Code :

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

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>";   
		 }

[Farmer64]

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

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

[ProgElecT]

Re

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

Code :

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

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

[NoSmoking]

Bonjour,

il me semble bien que tu pouvais faire aussi

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.

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

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

Quelque chose comme, à tester :

Code :

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

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

[ProgElecT]

Bonjour,

il me semble bien que tu pouvais faire aussi

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.

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

Code :

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

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.

[NoSmoking]

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 :

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

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 :

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

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.

[Farmer64]

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 ?
++

[NoSmoking]

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.