Affecter un événement une seule fois

Version imprimable

Bonjour,
cette discussion fait suite à : Création d'un mini jeu vidéo

J'aimerais que le joueur ne puisse pas jouer 2 fois dans la même map area, sinon c'est trop facile de faire des points.
Et du coup comme il y aura beaucoup de map area, qu'il est une sorte de radar des map déjà trouvées.

Du coup j'imagine que dans
Code:

1 2 3 4 5 6 if (result === area["dataset"]["nom"]) { // area["dataset"]["nom"] contient la valeur de la balise "data-nom" compt += 10; document.getElementById("champDuPrompt").innerHTML = compt; }
je vais insérer une ligne qui change l'eventlistener "Click" pour qu'il renvoie un message d'alerte si c'est déjà fait au lieu d'ouvrir le prompt

J'ai fait un essai en reprenant un code plus simple, une image, 2 maps area

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
<body>
    <map name="testmap" id="zones_image">
		<area
			shape="rect"
			coords="570,195,660,275"
			data-nom="bleu"
		/>
		<area
			shape="poly"
			coords="1027,266,1031,268,1034,271,1035,274,1033,279,1029,282,1021,282,1016,278,1017,271,1023,265,1024,261,1027,266"
			data-nom="jaune"
		/>
	</map>
 
    <img usemap="#testmap" src="Fond.png" STYLE="position:absolute; top:250; left:50">
 
 
 
<script type="text/javascript">
    
 
let balises_area = Array.from(
        document
                .getElementById("zones_image") // identifiant de la balise "map"
                .getElementsByTagName("area")
);
 
 
balises_area.forEach(area => { // parcours de toutes les balises "area"
 
        area.addEventListener( // ajout d'un gestionnaire d'évènement à une balise
                  "click"
                , evenement_clic => {
 
                        let area = evenement_clic["target"];
 
 
                        let result = prompt("Entre le nom du jeu :", "");
 
                        if (result === area["dataset"]["nom"]) { // area["dataset"]["nom"] contient la valeur de la balise "data-nom"
 
 
                        }
            else {
                 }
                }
        );
 
 
});
 
    
</script>
 
 
</body>

et j'ai essayé de changer l'attribut du click sur false pour que la map ne fonctionne plus.

Code:

document.getElementById("area["dataset"]["nom"]").setAttribute("onclick", "return false;");

Mais en fait plus rien ne fonctionne dès le début. si j'enlève cette ligne de code, les zones fonctionnent très bien.

Où me suis je planté???

Concernant ton soucis il existe également plusieurs solutions mais de loin la « plus mieux » et de n'écouter qu'une fois l'événement.

Pour cela tu peux passer à addEventListener l'option {once: true}.
Code:

1 2 3 4 5 6 7 8 function fonctionSurClic(e) { const elClicked = e.target; // par exemple ou this // ce que tu veux faire dans ta fonction } element.addEventListener("click", fonctionSurClic, { once: true });
Je te conseille de lire ceci : addEventListener : Problèmes de mémoire

30/09/2022, 08h08
bahh66

Par rapport à la fonction que tu as notée, j'ai lu le lien que tu m'as envoyé mais ce que je ne comprends pas, c'est que tu écoutes le gestionnaire d'élément "click" définit plus haut dans les area. Si cet évènement passe "true" alors le gestionnaire d'élément click s'arrête? Mais du coup, est ce que ca ne va pas s'arreter pour toutes les balises area ou juste pour une seule ?

J'ai aussi essayé de l'utiliser, mais la encore je ne sais pas où la placer. Dans les balises area? après? Lorsque je la mets avant, cela empêche les balises de fonctionner.
30/09/2022, 17h37
NoSmoking

Pour info : création d'une nouvelle discussion

Citation:

Si cet évènement passe "true" alors le gestionnaire d'élément click s'arrête?

l'événement est attaché à chaque élément, pas de façon global, quand tu auras cliqué sur un élément son événement attaché ne sera plus écouté mais cela ne concerne que cet élément et pas les autres en attendant qu'il soit cliqué à leur tour.

Citation:

J'ai aussi essayé de l'utiliser, mais la encore je ne sais pas où la placer.

là je ne comprend pas de quoi tu parles !?!

Tout d'abord, merci d'avoir créé une nouvelle discussion.

Ensuite quand j'utilise la fonction que tu as créé, elle n'enlève pas l'event "click". Je peux ouvrir une boite de dialogue à chaque fois que je clique sur la même zone

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
62
63
<body>
    <map name="testmap" id="zones_image">
		<area
			shape="rect"
			coords="570,195,660,275"
			data-nom="bleu"
		/>
		<area
			shape="poly"
			coords="1027,266,1031,268,1034,271,1035,274,1033,279,1029,282,1021,282,1016,278,1017,271,1023,265,1024,261,1027,266"
			data-nom="jaune"
		/>
	</map>
 
    <img usemap="#testmap" src="Fond.png" STYLE="position:absolute; top:250; left:50">
 
 
 
<script type="text/javascript">
    
 
let balises_area = Array.from(
        document
                .getElementById("zones_image") // identifiant de la balise "map"
                .getElementsByTagName("area")
);
 
 
    
balises_area.forEach(area => { // parcours de toutes les balises "area"
 
        area.addEventListener( // ajout d'un gestionnaire d'évènement à une balise
                  "click"
                , evenement_clic => {
 
                        let area = evenement_clic["target"];
 
 
                        let result = prompt("Entre le nom du jeu :", "");
 
                        if (result === area["dataset"]["nom"]) { // area["dataset"]["nom"] contient la valeur de la balise "data-nom"
 
 
                        }
            else {
                 }
                }
        );
 
 
});
    function fonctionSurClic(e) {
  const elClicked = e.target;   // par exemple ou this
  // ce que tu veux faire dans ta fonction
}
 
element.addEventListener("click", fonctionSurClic, {
  once: true
});
</script>
 
 
</body>

C'est pour cette raison que je pensais l'avoir mal placé dans le script.

Citation:

C'est pour cette raison que je pensais l'avoir mal placé dans le script.

Je crois avant tout qu'il faut que tu essaies de comprendre ce que tu écris/copies/intégres comme code car là ...

Je te propose de simplement essayer avec ce code entre les balises <script></script> à la place de ce qui s'y trouve.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 /** * function qui définie ce que l'on va faire au clic sur un élément */ function fonctionSurClic(e) { const elClicked = e.target; // ce que tu veux faire lors du clic sera à mettre ici // exemple : const coord = elClicked.getAttribute("coords"); alert(coord); } // autre façon, plus concise, pour récupérer les éléments const elementsArea = document.querySelectorAll("#zones_image area"); /** * pour toutes les area * affectation événement au clic, mais une seule fois avec ({once: true}) */ elementsArea.forEach((area) => { area.addEventListener("click", fonctionSurClic, { once: true }); });;

Citation:

Je crois avant tout qu'il faut que tu essaies de comprendre ce que tu écris/copies/intégres comme code car là ...

Je te promets, j'essaie, mais mes cours de code datent d'il y a 25 ans en java donc il me faut beaucoup d'efforts pour essayer de comprendre.

J'ai essayé quelque chose qui me semble convenir mais je préfère avoir un avis extérieur avant de clôturer le sujet.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function fonctionSurClic(e) { const elClicked = e.target; // ce que tu veux faire lors du clic sera à mettre ici // exemple : const coord = elClicked.setAttribute("coords","0,0,0,0"); //alert(coord); } const elementsArea = document.querySelectorAll("#zones_image area"); /** * pour toutes les area * affectation événement au clic, mais une seule fois avec ({once: true}) */ elementsArea.forEach((area) => { area.addEventListener("click", fonctionSurClic, { once: true }); });;
Comme je ne veux plus que le joueur puisse cliquer à nouveau dans une area, je me suis dit que j'allais réduire la map à 0.

Est-ce acceptable ou est-ce tiré pa les cheveux?

02/10/2022, 13h52
bahh66

Ah ben non ca ne fonctionne pas, j'ai fait plus de tests et la map disparait après une utilisation peut importe qu'elle soit juste ou non.
Du coup, il faut que je réfléchisse à une réponse qui ne fonctionne que si la réponse est juste.

Citation:

Du coup, il faut que je réfléchisse à une réponse qui ne fonctionne que si la réponse est juste.

en règle générale c'est ce que l'on fait avant tout codage, définir « correctement » son besoin ;)

Dans ton cas donc ce n'est pas un clic unique qui t’intéresse mais supprimer l'action au clic si la réponse est bonne.

Encore une fois il existe plusieurs solutions

suppression de l'écouteur grâce à la méthode Element.removeEventListener()
↪ Element.removeEventListener()
suppression de l'élément par lui même grâce à la méthode Element.remove()
↪ Element.remove()
suppression de l'attribut coord grâce à la méthode Element.removeAttribute(), ou mise à zéro comme tu l'as entrevu

↪ Element.removeAttribute()
...

Dans la fonction il te faut prendre cela en compte dans la partie
Code:

1 2 3 4 5 6 // la réponse est juste if (result === area["dataset"]["nom"]) { compt += 10; document.getElementById("champDuPrompt").innerHTML = compt; // supprimer l'écouteur, l'élément, les cooronnées ... }
Nota : dans ce cas et sur l'ajout via addEventListener il te faut donc supprimer l'option {once: true}.
Code:

1 2 3 elementsArea.forEach((area) => { area.addEventListener("click", fonctionSurClic); });

Citation:

définir « correctement » son besoin

Je pensais l'avoir fait mais je me rends compte que non en fait :oops:

Pour ce qui est des différentes solutions que tu me proposes.
Je souhaite qu'une bonne réponse dans le prompt entraine une suppression de l'écoute du click dans la zone répondu juste.

Donc il me semble qu'il faudrait faire

Code:

area.removeEventListener("click", evenement_clic);

vu qu'on lui demande plus haut

Code:

forEach(area=> area.addEventListener("click",evenement_click =>...

mais ca ne fonctionne pas, ai-je mal définit ma fonction? Au mauvais endroit?
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 <script type="text/javascript"> let balises_area = Array.from( document .getElementById("zones_image") // identifiant de la balise "map" .getElementsByTagName("area") ); balises_area.forEach(area => { // parcours de toutes les balises "area" area.addEventListener( // ajout d'un gestionnaire d'évènement à une balise "click" , evenement_clic => { let area = evenement_clic["target"]; let result = prompt("Entre le nom du jeu :", ""); if (result === area["dataset"]["nom"]) { // area["dataset"]["nom"] contient la valeur de la balise "data-nom" // supprimer l'écouteur, l'élément, les cooronnées ... function fonctionSurClic(e) { area.removeEventListener("click", evenement_clic); } } else { } } ); }); const elementsArea = document.querySelectorAll("#zones_image area"); /** * pour toutes les area */ elementsArea.forEach((area) => { area.addEventListener("click", fonctionSurClic); });; </script>

Reprenons tranquillement !

En premier on va définir ce que l'on veut faire au clic sur un élément <area>, c'est la fonction fonctionSurClic qui va s'en charger.

• Tout d'abord tes variables globales utilisées :

Code:

1
2
let compt = 0;
let vie = 3;

• Ensuite la « fameuse » fonction :

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
/**
 * function qui définie ce que l'on va faire au click sur un élément <area>
 */
function fonctionSurClic(e) {
  // récup. élément cliqué
  const elClicked = e.target;
  // demande faite à utilisateur
  const result = prompt("Entre le nom du jeu :" + elClicked["dataset"]["nom"], "");
  // traitement cas où appui sur annuler
  if (null === result) return;
  // test réponse
  // si réponse OK, il faudrait faire peut-être plus de contrôle
  // comme minuscule/MAJUSCULE, enlever les espaces début et fin ...
  if (result === elClicked["dataset"]["nom"]) {
    compt += 10;
    document.getElementById("champDuPrompt").innerHTML = compt;
    // (1) suppression de l'écouteur
    elClicked.removeEventListener("click", fonctionSurClic);  // fonctionSurClic est le nom de la fonction appelée
    // (2) suppression de l'élément
    // elClicked.remove();
    // (3) suppression de l'attribut coords
    // eClicked.removeAttribute("coords");
  }
  // réponse nOK
  else {
    let msg;
    vie -= 1;
    // mise à jour affichage nbr vies
    setNbrVies(vie);
    document.getElementById("nbdevies").innerHTML = vie;
    // traitement résultat
    if (vie == 0) {
      msg = "GAME OVER";
    }
    else {
      msg = "Il ne vous reste plus que " + vie + " vies";
    }
    // diffère l'affichage de la boîte alert
    setTimeout(() => alert(msg), 100);
  }
}

... je pense qu'elle est suffisamment commentée

• Puis affectation de cette fonction au clic, c'est tout simple :

Code:

1
2
3
4
5
6
7
8
/**
 * pour toutes les <area>
 * affectation événement au click
 */
const elementsArea = document.querySelectorAll("#zones_image area");
elementsArea.forEach((area) => {
  area.addEventListener("click", fonctionSurClic);
});

• Et pour finir, ce que l'on a déjà vu, le reste des fonctions/initialisations :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//// et pour fini ////////////////////////////////////////////
const elemHeart = document.querySelectorAll(".svg-heart use");
 
function setNbrVies(nbr) {
  elemHeart.forEach((svg, ind) => {
    svg.classList.remove("fill-heart");
    if (ind < nbr) {
      svg.classList.add("fill-heart");
    }
  });
}
// initialisation des coeurs pleins
setNbrVies(vie);
document.getElementById("nbdevies").innerHTML = vie;
document.getElementById("champDuPrompt").innerHTML = compt;

Voilà tu as tout ce qu'il te faut pour que cela fonctionne, il te suffit de reprendre ces codes les uns après les autres et de les mettre entre les balises <script></script> !

MERCI.

Tout d'abord, j'ai su copier/coller. :boulet: et bien évidemment ça fonctionne.

Ensuite, j'ai des questions pourquoi on a remplacé
Code:

1 2 3 4 5 6 7 8 9 let balises_area = Array.from( document .getElementById("zones_image") // identifiant de la balise "map" .getElementsByTagName("area") ); balises_area.forEach(area => { // parcours de toutes les balises "area" area.addEventListener( // ajout d'un gestionnaire d'évènement à une balise "click", evenement_clic => { let area = evenement_clic["target"];
par la fonction? depuis le début j'essaie de combiner les deux alors que tu as remplacé , il me semble, par
Code:

1 2 3 4 const elementsArea = document.querySelectorAll("#zones_image area"); elementsArea.forEach((area) => { area.addEventListener("click", fonctionSurClic); });
Tu as aussi noté dans le code

Citation:

// si réponse OK, il faudrait faire peut-être plus de contrôle
// comme minuscule/MAJUSCULE, enlever les espaces début et fin ...

et en effet, je pense qu'il va falloir réfléchir à une gestion de la casse, mais peut-être aussi d'erreurs orthographiques?
Je pense aussi rajouté une alerte qui renvoie la réponse rentrée si elle est juste.

J'attends juste une réponse à ces questions si tu le peux et je mettrai le sujet en résolu.

03/10/2022, 22h05
bahh66

Je viens de me rendre compte que du coup ca affiche la réponse dans le prompt, du coup plus besoin de réfléchir à la réponse à mettre.

J'ai donc modifié comme ça

Code:

const result = prompt("Entre le nom du jeu :" , "");

On dirait que ça fonctionne. J'espère ne pas avoir enlever un élément important.

Citation:

Je viens de me rendre compte que du coup ca affiche la réponse dans le prompt, du coup plus besoin de réfléchir à la réponse à mettre.

ah oui :oops:
j'ai oublié de te dire que j'avais ajouté l'info pour que tu sois sûr de la zone cliquée, ta correction est correcte !

Citation:

Ensuite, j'ai des questions pourquoi on a remplacés ...

Tout d'abord il est utile de préciser que chaque intervenants à ses propres habitudes de codage et qu'il y a rarement qu'une seule façon de faire ce qui explique les différentes écritures proposées pour un même problème par les intervenants.

Il est également souvent délicat d'appréhender le niveau du demandeur pour que la réponse ne soit pas trop nébuleuse ;)

• point #1
Les deux codes ont des écritures différentes mais font la « presque » la même chose.
code #1
Code:

1 2 3 4 5 let balises_area = Array.from( document .getElementById("zones_image") .getElementsByTagName("area") );
... dans ce cas on récupère un Element, getElementById pour lequel on récupère une HTMLCollection, getElementsByTagName et le résultat obtenu est converti en tableau, Array.from, on peut donc utiliser la méthode forEach() pour boucler sur ces éléments

code #2

Code:

const elementsArea = document.querySelectorAll("#zones_image area");

... dans ce cas on récupère directement une NodeList, en utilsant un sélecteur CSS, sur laquelle on peut directement itérer en utilisant forEach().

Ma préférence va à cette seconde écriture plus concise. Elle est supportée par les navigateurs récents, donc non IE (rip), depuis pas mal de temps.

Il faut cependant noter que les résultats retournés ne sont pas exactement les mêmes d'où le « presque » !!!

• getElementById : renvoie un Element https://developer.mozilla.org/fr/docs/Web/API/Element

• getElementsByTagName : renvoie une HTMLCollection https://developer.mozilla.org/fr/doc...HTMLCollection

• getElementsByClassName : renvoie une HTMLCollection https://developer.mozilla.org/fr/doc...HTMLCollection

• querySelector : renvoie un Element https://developer.mozilla.org/fr/docs/Web/API/Element

• querySelectorAll : renvoie une NodeList https://developer.mozilla.org/fr/docs/Web/API/NodeList

Je ne rentrerais pas plus dans le détail, dans certains cas certaines méthodes peuvent être préférable à d'autres.
• point #2
on rejoint le point approché au post #3 et concernant la mémoire
code #1
Code:

1 2 3 4 5 6 7 elementsArea.forEach((area) => { area.addEventListener("click", (e) => { // récup. élément cliqué const elClicked = e.target; // la suite du code plus ou moins complexe }; });
code #2
Code:

1 2 3 4 5 6 7 8 9 10 // définition une seule fois de la fonction function fonctionSurClic(e) { // récup. élément cliqué const elClicked = e.target; // la suite du code plus ou moins complexe }; }); elementsArea.forEach((area) => { area.addEventListener("click", fonctionSurClic); // bien noter la façon de passer la référence de la fonction });
Imaginons que tu aies 100 éléments auxquels il faille ajouter un comportement au clic.

• Dans le code #1 lors de l'affectation tu vas dupliquer 100 fois la même fonction, une fois pour chaque élément.

• Dans le code #2 tu définis une seule fois la fonction et elle servira pour tes 100 éléments, ce sera la même qui sera appelée, passage en paramètre par référence sans les parenthèses, d’où le gain en mémoire.

On utilise l'une ou l'autre mais effectivement pas les deux ;)

Nota : on pourrait également passer par de la délégation mais ceci est une autre histoire et pour ne pas t'embrouiller on verra peut-être cela à une autre occasion.
Voilà j’espère avoir répondu à ton attente.
...

04/10/2022, 20h07
bahh66

Merci et je continue mes questions sur un autre post.

• getElementById	: renvoie un Element	https://developer.mozilla.org/fr/docs/Web/API/Element
• getElementsByTagName	: renvoie une HTMLCollection	https://developer.mozilla.org/fr/doc...HTMLCollection
• getElementsByClassName	: renvoie une HTMLCollection	https://developer.mozilla.org/fr/doc...HTMLCollection
• querySelector	: renvoie un Element	https://developer.mozilla.org/fr/docs/Web/API/Element
• querySelectorAll	: renvoie une NodeList	https://developer.mozilla.org/fr/docs/Web/API/NodeList