如何在香草JS中使用条件停止单击事件?

Question

我刚刚开始学习JavaScript，这是一个任务，所以一切都必须只用香草JS完成。我需要做一个上升/下降计数器当你点击+时上升，当你点击-时下降。下面是我的代码，我们需要使用事件侦听器:

var currentNumberWrapper = document.getElementById("currentNumber");
var currentNumber = 0;
const adicionar = document.getElementById("adicionar");
const subtrair = document.getElementById("subtrair");
var mensagem = document.getElementById("mensagem");
adicionar.addEventListener("click", function() {
currentNumber++;
currentNumberWrapper.innerHTML = currentNumber;
});
subtrair.addEventListener("click", function() {
currentNumber--;
currentNumberWrapper.innerHTML = currentNumber;
});

<h1>Olá, mundo!</h1>
<p>Este é meu primeiro projeto JavaScript.</p>
<div id="counter">
<button name="subtrair" id="subtrair" onClick="decrement()">-</button>
<span id="currentNumber">0</span>
<button name="adicionar" id="adicionar" onclick="increment()">+</button>
</div>
<p id="mensagem">
<em>Clique nos botões para aumentar ou diminuir o número mostrado.</em>
</p>

这部分工作很好。然而，在赋值的第二部分，我们应该在满足条件后停止计数器，例如，如果currentNumber达到100或-10。这就是我被困的地方。我试过了:

用返回false停止计数器

adicionar.addEventListener("click", function () {
currentNumber++;
currentNumberWrapper.innerHTML = currentNumber;
if(currentNumber = 100){
return false;
}

我也试图将currentNumber设置为100，认为这会停止递增，但变量从100开始:

adicionar.addEventListener("click", function () {
currentNumber++;
currentNumberWrapper.innerHTML = currentNumber;
if(currentNumber = 100){
currentNumber = 100;
}
});

这是我的第一个JS项目，我也是编程新手，所以我觉得答案一定是很明显的。但我花了三个小时在Mozilla reference和W3Schools上，这只会让我更加困惑。我错过了什么?我应该创建一个单独的函数吗?如果是，在事件结束后如何调用它?我想在满足条件时更改

的内容，并将文本转换为重置，但我甚至还没有能够完成作业要求的内容。哦，好吧:

编辑:非常感谢你的回答!根据Robo Robok的建议，我只更改了一次计数器的行为currentNumber == 100。我不得不添加更多的函数，因为我不知道如何用JS更改伪元素，所以在满足重置条件后，我必须创建另外两个事件，而不是仅仅更改p:hover。我觉得对于这样一个简单的任务来说，这是太多的代码了，但它是有效的，所以我现在就把它拿走!

var currentNumberWrapper = document.getElementById("currentNumber");
var currentNumber = 0;
const adicionar = document.getElementById("adicionar");
const subtrair = document.getElementById("subtrair");
var mensagem = document.getElementById("mensagem");
function linkStyle() {
mensagem.style.cursor = "pointer";
mensagem.style.textDecoration = "underline";
mensagem.setAttribute("onMouseLeave", "styleOff()");
}
function styleOff() {
mensagem.style.cursor = "none";
mensagem.style.textDecoration = "none";
}
function reset() {
currentNumber = 0;
currentNumberWrapper.innerHTML = currentNumber;
mensagem.innerHTML =
"<em>Clique nos botões para aumentar ou diminuir o número mostrado.</em>";
mensagem.style.cursor = "none";
mensagem.style.textDecoration = "none";
}
adicionar.addEventListener("click", function () {
if (currentNumber >= 100) {
mensagem.innerHTML = "<em>Ufa! Cansei... não quer começar de novo?</em>";
mensagem.setAttribute("onClick", "reset()");
mensagem.setAttribute("onMouseEnter", "linkStyle()");
} else {
currentNumber++;
currentNumberWrapper.innerHTML = currentNumber;
}
});
subtrair.addEventListener("click", function () {
if (currentNumber == -10) {
mensagem.innerHTML =
"<em>Pra quê você precisa contar até -10?</em>";
mensagem.setAttribute("onClick", "reset()");
mensagem.setAttribute("onMouseEnter", "linkStyle()");
} else {
currentNumber--;
currentNumberWrapper.innerHTML = currentNumber;
}
});

Answer 1

您的代码中的一个问题是使用赋值操作符而不是相等操作符:

if (currentNumber = 100)

总是true，因为赋值操作符返回被赋值的值。

另一个问题是，即使它工作，返回false不会删除click侦听器。实际上，为了删除事件侦听器，您可以使用element.removeEventListener('click', handler)方法，但这可能是一种棘手的方法，特别是当值适合再次更改时(例如从100到99)，您需要将其添加回来。相反，只需考虑"消音"即可。行为:

adicionar.addEventListener("click", function () {
if (currentNumber >= 100) return;

currentNumber++;
currentNumberWrapper.innerHTML = currentNumber;
}

这样，您仍然运行click侦听器，但如果currentNumber超出限制，它将返回(不做任何事情)。

Answer 2

你可以做

adicionar.addEventListener("click", function() {
if (currentNum >= 100 || currentNum <= -10) {
return;
} else {
//MyScript
}
}

注意:我也是编程新手!我知道这是怎么回事……好运！