我正在尝试制作一个简单的点击游戏，我正在尝试实现升级系统，但我希望在按下重置按钮时停止生成升级。我有什么想法可以做到这一点吗？
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clicker</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<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>
<script src="script.js"></script>
</body>
</html>
这是我尝试使用所有我能在网上找到的东西
我添加了这个if语句来看看它是否有效，我主要想知道是否有一种方法可以在if语句中检查按钮是否被按下
if (btnElement1.addEventListener("click", (any))){
return;
}
您可以使用事件监听器回调。
btnElement1.addEventListener("click", callbackFn);
当您在
addEventListenerbtnElement1clickcallbackFnbtnElement1因此，您可以在
callbackFnif例如，使用箭头函数作为回调，接收包含执行单击的元素信息的事件对象：
btnElement1.addEventListener("click", (event) => {
//write your logic here
});