PROBLEME JEUX DU JUSTE PRIX

Ramoutcho
Javascript

Bonjour à tous,

Je cherche à creer le jeux du juste prix afin de m'initier au Javascript.
lorsque je lance le jeux une premiere fois, aucun probleme le jeux fonctionne correctement.
Mon probleme arrive lorsque je lance le jeux une seconde fois, en cliquant de nouveau sur mon bouton "Commencer".
Visiblement, la logique de mon code s'execute 2 fois, 1 fois avec l'ancienne variable aléatoire et une seconde fois avec la nouvelle variable.

Ce que je fais

Mon code HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Juste nombre</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> 
</head>
<body>

        <div id="intervalNbr">Devine le nombre entre 0 et 100 !!</div>

        <div id="chrono">30</div>

        <div id="commencer">
            <button id="btnCommencer">Commencer</button>
        </div>

        <form id="myForm">               
                <input type="text" class="nombre" placeholder="Entre ton nombre!">

        </form>
      <div id="reponse">Plus ou moins</div

    <script src="app.js"></script>
</body>
</html>

Mon code Javascript

//variable DOM
const btnCommencer = document.querySelector ('#btnCommencer');
const myform = document.querySelector ('#myForm');
const nombre = document.querySelector('.nombre');
const chrono = document.querySelector ('#chrono');
const reponse = document.querySelector('#reponse');
//autres variables

//APP

btnCommencer.addEventListener("click", function () {

    reponse.innerHTML = "Plus ou moins"
    chrono.innerHTML = 30; 

//Chonometre    

    const chronometre = setInterval(function (){
        if(chrono.innerHTML > 0){
            chrono.innerHTML -= 1;
        }else{
            chrono.innerHTML = "C'est perdu!!";
            clearInterval(chronometre);
        }      
    },1000);

//Initialise un nombre aléatoire entre 0 et 100
    let nombreATrouver = Math.floor(Math.random()*100);
    console.log(nombreATrouver);

//logique du jeux

    myform.addEventListener("submit", function(event){
        event.preventDefault();

         console.log(nombre.value);
        if(nombre.value < nombreATrouver){
            reponse.innerHTML = "Plus grand";

        } else if (nombre.value> nombreATrouver){
            reponse.innerHTML = "Plus petit";
        } else{
            clearInterval(chronometre);
            chrono.innerHTML = "C'est gagné!!";          
        }

        nombre.value = "";

    });

});Entourez votre code pour bien le mettre en forme

j'ai cherché sur le web, mais je ne trouve aucune solution à mon probleme.

si jamais quelqu'un peut me guider sur cette problematique, j'en serais reconnaissant.

dans l'attente de vos retour

2 réponses

Narshe
Réponse acceptée

Bonjour,

Le problème que tu as et que tu ajoutes un listener à ton form à chaque fois que tu cliques sur le bouton "commencer", tu as deux solutions, la plus simple et certainement la mieux est de mettre ton code de logique de jeux en dehors de ton listener sur le bouton, par ex

btnCommencer.addEventListener("click", function () {
  ...
});

myform.addEventListener("submit", function () {
    //logique du jeux
});

Ceci dit tu auras plus accès à ta variable "nombreATrouver " vu que sa portée se limite à la fonction anonyme de ton bouton ( pour résoudre ce problème, il suffi de la déclarer avec tes "variables DOM" et de changer sa valeur quand tu cliques sur le bouton )

L'autre solution consiste à utiliser la methode stopImmediatePropagation, je te laisse lire la doc pour savoir ce qu'elle fait et comment l'utiliser, tu en as pas forcément besoin pour résoudre ton problème mais c'est toujours pratique de savoir que c'est là.

J'ai noté aussi d'autres problèmes dans ton code je te les exposes pour que tu puisses les corriger ( si tu as le temps )

1 -Si tu appuis plusieurs fois sur le bouton "commencer" avant de réussir à gagner ou que le timer arrive à zéro, tu vas lancer plusieurs intervals en même temps et ça va provoquer un bug.

2- A aucun moment tu vérifies si l'input est vide ou que les données soient autre chose que un nombre

3- Quand on gagne, il y a bien un texte qui s'affiche comme quoi on a gagné, mais tu oublies d'effacer le texte "Plus grand" ou "Plus Petit", ça peut preter à confusion

Enfin c'est pas vraiment un problème mais plutôt une suggestion pour ton exercice, pourquoi ne pas afficher l'input uniquement quand le timer a commencé et cacher le bouton "commencer" pour le remplacer par le timer quand on clique dessus ( il suffi d'ajouter/retirer une classe à ces éléments pour les afficher ou non )

J'espère avoir pu t'aider et que j'ai pas été trop flou dans mes explications, sinon hésites pas à demander plus d'informations !

Ramoutcho
Auteur

Bonjour,

Tout d'abord merci pour ta solution qui a bien résolut mon problème.
J’ai donc appliqué la première méthode qui a été simple à mettre en place.
J'ai également essayé ta deuxième méthode, mais là, j'ai beaucoup plus de mal. J’ai tout de même revu la vidéo tuto sur les évènements sur le site, j'ai saisi l'histoire de propagation entre élément HTML mais pour mon cas j'ai du mal à comprendre comment cela fonctionne. Je pense me pencher sur la chose plus en profondeur une fois mon app terminé.
J'apprécie également tes suggestions pour mon code, je comptais réparer mon premier bug avant de corriger les autres.
Actuellement, j'en ai solutionné certains, et maintenant je vais m’attaquer aux éléments qui doivent se cacher et donner un peu de style à tout ça.
En tous cas, merci pour ton aide, cela ma débloqué dans mon code.