addEventListenner en javascript

**yousss77** · 09/02/2021, 13h00

Bonjour � tous,

je souhaite de l'aide ne serait ce qu'une piste pour m'aidez un petit peu car je suis autodidacte et demande rarement de l'aide,
le souci c'est que l� je suis sur ce probl�me depuis 2 jours.

dans l'appli javascript (un jeu de d� pour 2 joueurs) que j'ai r�duit au max pour plus de lisibilit�.

1-Quand le premier joueur1 est initialis� on peut lancer les d� avec l'�l�ment html roll dice et la fonction js (displayScore()) tous va bien.
2-Quand je change de joueur avec l'�l�ment html hold et la fonction js (changePlayer()) tout va bien on passe au 2�me joueur
et le d� se lance avec le 2�me joueur donc normal.

Le souci � cette �tape c'est que le d� continue de jouer avec player1.
Donc j'ai log� dans la console l'�v�nement et le souci c'est que les clics sur hold (pour changer de joueur) se comptabilise et se r�percute quand on passe au prochain joueur
je suis certains � 100% que c'est un souci li� � l'�vent soit en phase de bouillonnement ou capture

j'ai mis mes options capture � false et true ainsi que le stopPropagation() et malgr� �a le probl�me persiste,

si je vous sollicite c'est vraiment parce que j'ai pass� 2 jours dessus et �a ma mis un gros coup au moral.

Voici le lien de l'appli sur CodePen :

https://codepen.io/your-work/

Voici le code :

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!DOCTYPE html>
 
<html lang="fr">
 
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>jeu de dés</title>
    </head>
 
    <body>
        <div id="launchGame">
            <h1>NEW GAME</h1>
        </div>
 
        <div id="players">
            <div id="player_1"><h2>PLAYER 1</h2><span id="score_player_1">Score :</span></div>
            <picture><img id="dice">img</picture>
            <div id="player_2"><h2>PLAYER 2</h2><span id="score_player_2">Score :</span></div>
        </div>
 
        <div id="current_score">
            <div id="current_score_1"><p>current<span id="round_player_1"></span></p></div>
                <div id="controls_game">
                    <h3 id="roll_dice"><img src="images/re_game.png">ROLL DICE</h3>
                    <h3 id="hold"><img src="images/charge_score.png">HOLD</h3>
                </div>
            <div id="current_score_2"><p>current<span id="round_player_2"></span></p></div>
        </div>
 
        <style>
            body {
    margin: 0;
    padding: 0;
    font-family: "Lato";
    background-color: silver;
    background: linear-gradient(to left, white, white 50%, rgb(228, 227, 227) 50%, rgb(228, 227, 227));
    text-align: center;
    color: gray;
}
 
h1 {
    width: 40%;
    margin: 1% auto 5%;
    font-size: 1.5rem;
}
h1::before {
    content: "⊕ ";
    font-size: 2rem;
    align-items: center;
    color: tomato;
}
 
h2 {
    height: 30px;
    line-height: 30px;
}
 
h3 {
    margin: 7% 0;
}
 
span {
    display: block;
    margin-top: 50%;
}
 
img {
    max-width: 10%;
    vertical-align: middle;
    margin-right: 3%;
}
 
#players, #final_score, #current_score, #current_score_1, #current_score_2, #controls_game {
    display: flex;
}
 
#players, #final_score, #current_score {
    flex-direction: row;
    justify-content:space-evenly;
    align-items: center;
}
#players {
    justify-content:space-around;
    margin: 1% 1% 10%;
}
 
#current_score_1, #current_score_2 {
    border-radius: 20%;
    padding: 2% 4%;
    background-color: tomato;
    color: white;
}
 
#controls_game {
    flex-direction: column;
    max-width: 33%;
}
 
        </style>
 
        <script>(function(){
 
            window.addEventListener("DOMContentLoaded", function() { 
        
                const launch = document.getElementById("launchGame");
                const rollDice = document.getElementById("roll_dice");
        
                function currentPlayer(player) {
        
                    const hold = document.getElementById("hold");
        
                    if (player.getElementsByTagName("img").length < 1) {
                        player.firstChild.style.position = "relative";
        
                        var currentPlayer = new Image();
                        currentPlayer.src = "images/current_player.png";
                        currentPlayer.setAttribute("class", player.getAttribute("id"));
        
                        currentPlayer.style.position = "absolute";
        
                        player.firstChild.appendChild(currentPlayer);
                    }   else {
                            player.getElementsByTagName("img")[0].style.visibility = "visible";
                        }
        
                        changePlayer(player);
        
                        rollDice.addEventListener("click", function(e) {
                        e.stopPropagation();
                        displayScore(player);
                        }, {capture:false, once: false, useCapture: true});          
                }
        
                function player1() {
                    let player1 = document.getElementById("player_1");
                    currentPlayer(player1);
                }
        
                function player2() {
                    let player2 = document.getElementById("player_2");
                    currentPlayer(player2);
                }
        
                function changePlayer(player) { 
                    hold.addEventListener("click", function(e) {
                        e.stopPropagation();
                        player.getElementsByTagName("img")[0].style.visibility = "hidden";
        
                        if (player.getAttribute("id") === "player_1") {
                            console.log(player.getAttribute("id"));
                            player2();
                        } else if (player.getAttribute("id") === "player_2") {
                            console.log(player.getAttribute("id"));
                            player1();
                          }
                    }, {capture:false, once:true, useCapture: true});
                }
        
                function displayScore(player) {
                        let scoreDice = getScoreDice();
                        let scorePlayer = document.getElementById("round_" + player.getAttribute("id")); 
                        scorePlayer.textContent = scoreDice(); 
                }
        
                function getScoreDice() {
                    var result = 0;
                    var faceDice = Math.floor(Math.random()*7); 
                
                    if ((faceDice > 0) && (faceDice < 7)) {
                        result = faceDice;
                    } else {
                        result = faceDice+1;
                      }  
        
                    function innerGetScoreDice() {
                        return result;
                    }
        
                    return innerGetScoreDice;
                }
                
                launch.addEventListener("click", player1(), {capture:false, once:true});
        
            });
        
        })() </script>
    </body>
 
</html>

Merci beaucoup de votre aide,

Cordialement.

**mathieu** · 09/02/2021, 21h46

le souci vient de "rollDice.addEventListener".
puisque il y a "once false", l'�v�nement du joueur 1 reste accroch� quand vous ajoutez l'�v�nement du joueur 2.
mais si vous mettez "once true", chaque joueur peut seulement cliquer une fois donc �a ne va pas non plus.

d'habitude, je me sors de ce genre de situation avec un �v�nement accroch� au chargement et des variables d'�tats globales. mais je ne suis pas un expert javascript donc n'h�sitez pas � attendre l'avis d'autres d�veloppeurs qui vous proposeront surement une fa�on de faire avec du code plus clair et plus optimis� que moi.

**yousss77** · 09/02/2021, 22h17

en tout cas merci pour votre retour vraiment,

c'est d�j� pour moi un grand soulagement d'avoir eu votre retour,

Merci !!!

**Doksuri** · 10/02/2021, 09h15

salut, le probleme vient de ta function function currentPlayer(player) {}, et plus precisement, de ton listener rollDice.addEventListener("click", function(e) {...tu ajoutes un listener, mais tu ne le supprimes jamais : juste a l'entree de ton listener, tu peux ajouter un log, tu te rendras compte du probleme

Code javascript :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
rollDice.addEventListener("click", function(e) {
                            console.log('roll dice player', player);
...

si tu roll dice 1 seule fois, pour chaque joueur, tu te rendras compte que le nombre de log ne cesse d'augmenter : a chaque fois que tu entres dans la function currentPlayer(), tu rajoute un event aux events deja existant...
si tu changes 20 fois de player, tu auras 20 lances de des... tu ne pouvais pas le constater, car le resultat final, est un lance de des random... que t'en fasses 1 ou 100, c'est pareil

2 solutions :
1) passer par un removeEventListener() quand tu changes de joueur
2) (et celle que je preconise pour ton cas) utiliser une variable globale pour savoir quel est le joueur "actif", et du coup, "sortir" ton listener de ta function

**yousss77** · 10/02/2021, 17h02

Doksuri,

merci beaucoup pour ton �claircissement,

en effet j'avais remarqu� que les events se comptabilis� avec console.log,
du coup en faisant selon tes conseils �a fonctionne bien maintenant et m�me sans removeEventListener �a fonctionne, bien qu'il faut supprimer quand m�me l'event de l'�l�ment,

mais de base l'id�e �tait de cloisonner au Max les variables,
du coup j'en pense que cloisonner les variables n'est pas for�emment une pratique absolue car si on cloisonne on red�finie la variable autant qu'on appele sont contexte alors qu'en statut globale on d�finie une fois la variable et ensuite c'est la valeur qui change. Cela d�pendra du contexte.

Qu'est ce que tu en pense ?

il y � autre chose quand on eventListener un �l�ment on ne peut r�unir les avantages des 2 mani�res de faire:

avec fonction nomm� (pouvoir le supprimer avec remove...)

ou

avec fonction anonyme (pouvoir r�cuperer l'objet event, ou ajouter des arguments � la fonction)

Peut on r�unir les avantages des 2 mani�res de faire ?

**Doksuri** · 11/02/2021, 08h08

personellement, je procede toujours de la sorte :

je passe par l'event delegation : developer.mozilla.org/fr/docs/Web/API/Event/target, comme dans leurs exemple, je passe juste ma function en argument de l'event ul.addEventListener('click', hide, false); ce qui me permet de gerer proprement tous mes cas possible dans ma function
et en cas de besoin, c'est plus siple pour remove le listener

**yousss77** · 11/02/2021, 13h06

Ok,

Merci !

addEventListenner en javascript

JavaScript

Discussions similaires

Partager

Partager