Sélections les dataset d'une div
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:
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> |
