JavaScript - 在我重置计数器并分配数字后，它不起作用

Question

所以我做了一个计数器。当你按下"；"开始"；"；单词"；出现，然后您可以开始按下红色方块，每次按下后数字将增加1。当数字大于5〃时；重置"；出现。在按下"；重置"；计数器应复位并正常工作但出于某种原因，我甚至认为在按下"；重置"；然后按"；"开始"；然后开始按红色方块，数字不是增加1，而是增加2。如果你不理解我的问题，我会尝试更详细地解释。

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>

Answer 1

之所以会发生这种情况，是因为每次单击开始按钮时都会在红色方块事件中添加一个额外的单击事件。如果你按下开始键5次，然后点击红色方块，你会看到它会立即跳到5。

您可以通过将方形单击事件移动到按钮单击之外来解决此问题。现在，您可以添加一个布尔标志来检查是否允许单击。(在我的示例中为canClick(

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>