J'ai donc fait un compteur. Lorsque vous appuyez sur « begin », le « mot » apparaît, puis vous pouvez commencer à appuyer sur le carré rouge et après chaque pression, le nombre augmente de 1. Lorsque le nombre est supérieur à 5, « reset » apparaît. Après avoir appuyé sur « reset », le compteur devrait se réinitialiser et fonctionner normalement. Mais pour une raison quelconque, même si j'attribue la valeur numérique à 0, après avoir appuyé sur "réinitialiser", puis sur "commencer", puis sur le carré rouge, le nombre augmente non pas de 1 mais de 2. Si vous ne comprenez pas mon problème, je vais essayer de l'expliquer plus en détail.

var square = document.getElementById("square");
var numb = document.getElementById("number");
var num = 0;
var begin = document.getElementById("begin");
var word = document.getElementById("word");
var reset = document.getElementById("reset");

begin.addEventListener("click", function() {
  word.style.display = "block";
  if (word.style.display == "block") {
    square.addEventListener("click", function() {
     if (num > 5) {
        word.style.display = "none";
        reset.style.display = "block";
      } else {
        num = num + 1;
        numb.innerHTML = num;
      }
    })
  }
})

reset.addEventListener("click", function(){
  num = 0;
  numb.innerHTML = num;
  reset.style.display = "none";
})
#square{
  position: absolute;
  background-color: red;
  height: 150px;
  width: 150px;
}

#number{
  position: absolute;
  top: 200px;
  font-size: 25px;
}

#begin{
  position: absolute;
  top: 300px;
  font-size: 25px;
}

#word{
  position: absolute;
  top: 400px;
  font-size: 25px;
  display: none;
}

#reset{
  position: absolute;
  top: 500px;
  font-size: 25px;
  display: none;
}
<div id="square"></div>
<div id="number">0</div>
<div id="begin">begin</div>
<div id="word">word</div>
<div id="reset">reset</div>
0
Marihuan 29 oct. 2020 à 18:06

1 réponse

Meilleure réponse

Cela se produit parce que vous ajoutez un événement de clic supplémentaire à l'événement carré rouge à chaque fois que vous cliquez sur le bouton de démarrage. Si vous appuyez sur commencer 5 fois, puis cliquez sur les carrés rouges, vous verrez qu'il passera instantanément à 5.

Vous pouvez résoudre ce problème en déplaçant l'événement de clic carré en dehors du clic sur le bouton. Vous pouvez maintenant ajouter un indicateur booléen pour vérifier si vous êtes autorisé à cliquer. (canClick dans mon exemple)

var square = document.getElementById("square");
var numb = document.getElementById("number");
var num = 0;
var begin = document.getElementById("begin");
var word = document.getElementById("word");
var reset = document.getElementById("reset");
var canClick = false

begin.addEventListener("click", function() {
  word.style.display = "block";
  if (word.style.display == "block") {
    canClick = true;
  }
})

square.addEventListener("click", function() {
  if(canClick) {
    if (num > 5) {
      word.style.display = "none";
      reset.style.display = "block";
    } else {
      num = num + 1;
      numb.innerHTML = num;
    }
  }
})

reset.addEventListener("click", function(){
  num = 0;
  numb.innerHTML = num;
  reset.style.display = "none";
  canClick = false;
})
#square{
  position: absolute;
  background-color: red;
  height: 150px;
  width: 150px;
}

#number{
  position: absolute;
  top: 200px;
  font-size: 25px;
}

#begin{
  position: absolute;
  top: 300px;
  font-size: 25px;
}

#word{
  position: absolute;
  top: 400px;
  font-size: 25px;
  display: none;
}

#reset{
  position: absolute;
  top: 500px;
  font-size: 25px;
  display: none;
}
<div id="square"></div>
<div id="number">0</div>
<div id="begin">begin</div>
<div id="word">word</div>
<div id="reset">reset</div>
1
Reyno 29 oct. 2020 à 15:21