IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

addEventListenner en javascript


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Homme Profil pro
    apprenti développeur
    Inscrit en
    juillet 2016
    Messages
    20
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : apprenti développeur
    Secteur : Industrie

    Informations forums :
    Inscription : juillet 2016
    Messages : 20
    Points : 21
    Points
    21
    Par défaut addEventListenner en javascript
    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: "&#8853; ";
        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.

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    7 972
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 7 972
    Points : 12 422
    Points
    12 422
    Par défaut
    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.

  3. #3
    Membre à l'essai
    Homme Profil pro
    apprenti développeur
    Inscrit en
    juillet 2016
    Messages
    20
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : apprenti développeur
    Secteur : Industrie

    Informations forums :
    Inscription : juillet 2016
    Messages : 20
    Points : 21
    Points
    21
    Par défaut merci
    en tout cas merci pour votre retour vraiment,

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

    Merci !!!

  4. #4
    Membre expert
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    juin 2006
    Messages
    2 052
    Détails du profil
    Informations personnelles :
    Âge : 51
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : juin 2006
    Messages : 2 052
    Points : 3 638
    Points
    3 638
    Par défaut
    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
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  5. #5
    Membre à l'essai
    Homme Profil pro
    apprenti développeur
    Inscrit en
    juillet 2016
    Messages
    20
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : apprenti développeur
    Secteur : Industrie

    Informations forums :
    Inscription : juillet 2016
    Messages : 20
    Points : 21
    Points
    21
    Par défaut variables globales
    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 ?

  6. #6
    Membre expert
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    juin 2006
    Messages
    2 052
    Détails du profil
    Informations personnelles :
    Âge : 51
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : juin 2006
    Messages : 2 052
    Points : 3 638
    Points
    3 638
    Par défaut
    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
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  7. #7
    Membre à l'essai
    Homme Profil pro
    apprenti développeur
    Inscrit en
    juillet 2016
    Messages
    20
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : apprenti développeur
    Secteur : Industrie

    Informations forums :
    Inscription : juillet 2016
    Messages : 20
    Points : 21
    Points
    21
    Par défaut
    Ok,

    Merci !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Les meilleurs livres pour apprendre le JavaScript
    Par vermine dans le forum Livres
    Réponses: 23
    Dernier message: 10/06/2019, 18h58
  2. JavaScript<---->ActionScript
    Par crazypiou dans le forum Flash
    Réponses: 21
    Dernier message: 17/04/2009, 17h14
  3. Construire chemin sur bouton avec évt Javascript
    Par Ph. B. dans le forum XMLRAD
    Réponses: 4
    Dernier message: 27/05/2003, 10h26
  4. appel xmlservice via fonction javascript
    Par pram dans le forum XMLRAD
    Réponses: 2
    Dernier message: 06/05/2003, 14h24
  5. JavaScript de vérification de formulaire
    Par [DreaMs] dans le forum XMLRAD
    Réponses: 6
    Dernier message: 26/02/2003, 13h48

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo