javascript - 函数结束后停止 ElementbyID onClick 运行

Question

在下面的代码中，当按下开始按钮时，将生成一个随机数。点击正确的数字(JS onClick)，分数会增加1。点击错误的数字，分数会减少1。我在这段代码中将正确的数字硬编码为5。

当我点击结束按钮时，随机数将停止生成。然而，分数仍然可以按增加/减少分数。一旦按下结束按钮，得分即为最终得分。我尝试添加 true/false bool 条件，但它似乎根本不起作用。

非常感谢有人建议我如何在单击结束按钮后阻止 onClick 工作，以便无法再调整分数。我只是在寻找 Javascript 解决方案(没有 JQuery)。

var counter = 0;
var score = 0;
var change;

function start() {
  var totalscoreSpan = document.getElementById("tscore");
  totalscoreSpan.innerHTML = counter;

  rand();
  interval();
}

function rand() {
  var randnumber = Math.floor(Math.random() * 10);

  var random1Span = document.getElementById("number");
  random1Span.innerText = randnumber;
  document.getElementById("number").onclick = function() {
    if (randnumber == 5) {
      counter += 1;
      document.getElementById("tscore").innerHTML = counter;
    } else {
      counter -= 1;
      document.getElementById("tscore").innerHTML = counter;
    }
  }
}

function interval() {
  change = setInterval(rand, 1000);
}

function end() {
  // End changing number
  clearInterval(change);
}

<button onClick="start()">Start</button>
<button onClick="end()">End</button>
<br /><br />
<span style="font: Arial; font-size: 26;">Score: </span><span id="tscore" style="font: Arial; font-size: 26; color: red;"></span>
<br /><br />
<span id="number" style="font: Arial; font-size: 64; color: red;"></span>

Answer 1

您可以从 #number 中删除 click 事件监听器，也可以检查 end 按钮是否已被单击。

第一种方法是将您的 end() 函数更改为如下所示:

function end()
{
    document.getElementById('number').removeEventListener('click');
    // End changing number
    clearInterval(change);
}

第二种方式:

1. 添加一个变量，每次用户点击数字时都会检查该变量:

let ended = false;

更改 end() 函数中的变量:

function end()
{
    ended = true;
    // End changing number
    clearInterval(change);
}

每次用户点击数字时检查 end 是否为 true:

document.getElementById("number").onclick = function()
{
  if (ended) return;

  // rest of your event listener code goes here...
}