如何在JS中检测按钮点击并停止点击器游戏的自动升级？

我正在制作一款简易点击器游戏，目前正在实现升级系统，但希望点击Reset按钮时，能够停止升级的自动生成效果。我尝试了从网络获取的方法，添加了一段if语句进行尝试，但不确定是否可行，主要想了解是否可以用if语句检测按钮是否被点击。

现有代码 #

JavaScript #

const btnElement = document.getElementById("btn");
const btnElement1 = document.getElementById("btn1");
const btnElement2 = document.getElementById("btn2");
const spnElement = document.getElementById("span");
let score = 1;

btnElement2.addEventListener("click", () => {
  if (score < 10) {
    console.log("poor");
  } else if (score >= 10) {
    var interval = setInterval(increment, 1000);

    function increment() {
      score = score % 360 + 1;
      spnElement.innerText = score;
    }
  }
})

btnElement.addEventListener("click", () => {
  spnElement.innerText = score++;
})

btnElement1.addEventListener("click", () => {
  spnElement.innerText = 0;
  score = 1;
})

document.body.addEventListener("keyup", function(event) {
  if (event.code === "Space") {
    spnElement.innerText = score++;
  }
})

document.body.addEventListener("keydown", function(event) {
  if (event.code === "Space") {
    spnElement.innerText = score;
  }
})

document.body.addEventListener("keydown", function(event) {
  if (event.code === "Enter") {
    spnElement.innerText = 0;
    score = 1;
  }
})

CSS #

body {
  background-color: lightblue;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
}

#header {
  background-color: lightcyan;
  position: absolute;
  right: 0;
  top: 0px;
  margin: 0px;
  border-width: 2px;
  border-bottom-width: 2px;
  border-bottom-color: whitesmoke;
  border-bottom-style: solid;
  width: 100.09%;
}

#btns {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

.btns {
  background-color: lavender;
  color: #333;
  border-width: 1px;
  border-color: palegreen;
  border-radius: 5px;
}

.btns:hover {
  background-color: mediumpurple;
}

#text {
  text-align: center;
}

HTML #

<div id="header">
  <div id="text">
    <h1>Clicker</h1>
    <h2><span id="span">0</span></h2>
  </div>
  <div id="btns">
    <button id="btn" class="btns">+</button>
    <button id="btn1" class="btns">Reset</button>
    <button id="btn2" class="btns">Skibidi 1 (10 clicks)</button>
  </div>
</div>

我尝试的错误代码 #

我尝试添加了以下if语句，但不确定是否正确：

if (btnElement1.addEventListener("click", (any))){    return;}

解决方案 #

你不能用if语句直接检测按钮是否被点击，事件监听是异步触发的，正确做法是通过管理定时器ID来实现停止自动升级：

修改后的JavaScript代码 #

const btnElement = document.getElementById("btn");
const btnElement1 = document.getElementById("btn1");
const btnElement2 = document.getElementById("btn2");
const spnElement = document.getElementById("span");
let score = 1;
let interval = null; // 全局存储定时器ID，方便后续清除

btnElement2.addEventListener("click", () => {
  if (score < 10) {
    console.log("poor");
  } else if (score >= 10) {
    // 先清除已有定时器，避免重复创建多个定时器
    if (interval) clearInterval(interval);
    interval = setInterval(increment, 1000);

    function increment() {
      score = score % 360 + 1;
      spnElement.innerText = score;
    }
  }
})

btnElement.addEventListener("click", () => {
  spnElement.innerText = score++;
})

btnElement1.addEventListener("click", () => {
  spnElement.innerText = 0;
  score = 1;
  // 停止自动升级定时器
  if (interval) {
    clearInterval(interval);
    interval = null; // 重置变量，避免后续重复清除报错
  }
})

document.body.addEventListener("keyup", function(event) {
  if (event.code === "Space") {
    spnElement.innerText = score++;
  }
})

document.body.addEventListener("keydown", function(event) {
  if (event.code === "Space") {
    spnElement.innerText = score;
  }
})

document.body.addEventListener("keydown", function(event) {
  if (event.code === "Enter") {
    spnElement.innerText = 0;
    score = 1;
    // 按Enter重置时也停止定时器
    if (interval) {
      clearInterval(interval);
      interval = null;
    }
  }
})

关键说明 #

1. 将interval变量提升到全局作用域，让Reset按钮和Enter键的事件处理函数能访问到它
2. 创建新定时器前先清除旧的，防止多个定时器同时运行导致数值跳变
3. 在重置逻辑中调用clearInterval(interval)停止自动更新，同时重置interval为null，避免后续重复清除时报错

内容的提问来源于stack exchange，提问作者user22881646