Discussion :

[Eckmül]

Bonjour,

J'ai un petit soucis de fonction click sur une div. Mon but ultime est de faire un affichage dans un tableau de mes résultats grâce à des fieldset, j'ai des résultats de recherches qui s'écrivent en php de façon dynamique avec une boucle, puis je voudrais récupérer les dataset de la div sur laquelle je click. Le soucis, c'est que vu que les fonctions se déclarent une fois la boucle fini, les informations renvoyés sont celles de la dernière div. Je voudrais que chaque fonction de clic renvoi les infos de la div en question. Je vous mets mon code html/js en simplifié pour vous donner une idée de ce que ce ça peut donner :

Code html :

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
<div class="divResult" id="divResult1" data-value="1" data-definition="Bâtiment 1" data-geometrie="surfacique" data-symbologie="BATI_1" data-image="public/img/BATI_1.PNG" data-jeu="Jeu_bati" data-classe="Classe_jeu">
	<img id="imgResult1" src="public/img/BATI_1.PNG" alt="Image pas chargée">
	<div class="podResult" id="podResult1" data-value="1">
		<p>1 : Bâtiment 1</p>
	</div>
	<p>
		a une géométrie surfacique avec le code symbologique BATI_1 dans le jeu Jeu_bati dans la classe d\'entitée Classe_jeu
 
	</p>
</div>
 
<div class="divResult" id="divResult2" data-value="2" data-definition="Bâtiment 2" data-geometrie="surfacique" data-symbologie="BATI_2" data-image="public/img/BATI_2.PNG" data-jeu="Jeu_bati" data-classe="Classe_jeu">
	<img id="imgResult2" src="public/img/BATI_2.PNG" alt="Image pas chargée">
	<div class="podResult" id="podResult2" data-value="2">
		<p>2 : Bâtiment 2</p>
	</div>
	<p>
		a une géométrie surfacique avec le code symbologique BATI_2 dans le jeu Jeu_bati dans la classe d\'entitée Classe_jeu
 
	</p>
</div>
 
<div class="divResult" id="divResult3" data-value="3" data-definition="Bâtiment 3" data-geometrie="surfacique" data-symbologie="BATI_3" data-image="public/img/BATI_3.PNG" data-jeu="Jeu_bati" data-classe="Classe_jeu">
	<img id="imgResult3" src="public/img/BATI_3.PNG" alt="Image pas chargée">
	<div class="podResult" id="podResult3" data-value="3">
		<p>3 : Bâtiment 3</p>
	</div>
	<p>
		a une géométrie surfacique avec le code symbologique BATI_3 dans le jeu Jeu_bati dans la classe d\'entitée Classe_jeu
 
	</p>
</div>
 
<div id="resultat"></div>
 
<script>
        // le bouton du résultat
 
        "use strict";
 
        var length = 3; // je le définie ici pour le test normalement il est défini dans un autre fichier
        var resultat = document.getElementById("resultat");
        
        for (var compteur = 1; compteur <= length; compteur++){
 
                let idPod = "podResult" + compteur;
                let idDiv = "divResult" + compteur;
                let idImg = "imgResult" + compteur;
                var divPod = document.getElementById(idPod);
                var divSearch = document.getElementById(idDiv);
                var divImg = document.getElementById(idImg);
 
                divPod.addEventListener("click",function ()
                {
                        resultat.innerHTML = "<fieldset class=\"imageFieldset\"><p>Image de l'objet :</p><img src=\"" + divSearch.dataset.image + "\" alt=\"Image pas chargée\"></fieldset><fieldset class=\"desciptionFieldset\"><p>Description de l'objet : " + divSearch.dataset.description + "</p></fieldset><fieldset><p>Géométrie :</p></fieldset><fieldset><p>Code symbologique :</p></fieldset><fieldset><p>Classe d'entité :</p></fieldset><fieldset><p>Jeu de classe d'entité :</p></fieldset>";
                        console.log(compteur);
                });
        }
 
</script>

[NoSmoking]

Bonjour,
tu as un soucis avec les variables de boucle, pour t'en convaincre pose toi la question que vaut compteur à l'exécution de la fonction au moment du clic.

Il existe maintes façons de régler le soucis mais dans ton cas tu te compliques la vie inutilement.

Essaie ce code pour t'en persuader.

Code :

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

1
2
3
4
5
6
7
8
9
10
// fonction exécutée au clic
function handleClick(e) {
  const divSearch = this.closest(".divResult");
  console.log(divSearch.dataset);
}
// affectation de l'action
const elements = document.querySelectorAll(".podResult");
elements.forEach((el) => {
  el.addEventListener("click", handleClick);
});

[Eckmül]

@NoSmoking

Très bien, merci de ta réponse, c'est nickel, c'est ce dont j'avais besoin !