原生JS如何通过条件判断控制点击事件实现计数器边界限制

你之前代码的核心问题 #

• 运算符用错：判断相等应该用===（严格相等）或者==（宽松相等），你写的if(currentNumber = 100)里的=是赋值运算符，不是比较——这行代码的作用是直接把currentNumber的值改成100，根本不是判断是否到了100，这就是你之前遇到变量直接变成100的原因。
• 逻辑顺序错了：你是先执行currentNumber++/currentNumber--修改数值，再做阈值判断，就算判断生效，数值也已经被改了，根本拦不住越界。
• 冗余代码：HTML里按钮写了内联的onClick="decrement()"、onclick="increment()"，但你根本没定义这两个函数，而且作业要求用事件监听器实现，这类内联事件属性应该删掉。另外你单独写的鼠标进出改样式的函数完全没必要，用CSS类实现简单十倍。

最简可运行实现 #

首先把HTML里没用的内联事件删掉，结构保持简单：

<h1>你好，世界！</h1>
<p>这是我的第一个JS项目</p>

<div id="counter">
  <button name="subtrair" id="subtrair">-</button>
  <span id="currentNumber">0</span>
  <button name="adicionar" id="adicionar">+</button>
</div>
<p id="mensagem">
  <em>点击按钮即可增减显示的数字</em>
</p>

加一小段CSS处理可点击重置的提示样式，不用写JS监听鼠标进出：

.reset-tip {
  cursor: pointer;
  text-decoration: underline;
}

JS逻辑把判断提前，先检查阈值再修改数值，所有交互都用事件监听器实现：

const currentNumberWrapper = document.getElementById("currentNumber");
const adicionar = document.getElementById("adicionar");
const subtrair = document.getElementById("subtrair");
const mensagem = document.getElementById("mensagem");
let currentNumber = 0;

// 加按钮监听
adicionar.addEventListener("click", function() {
  // 先判断是否到上限100，到了就改提示、加可重置样式，直接返回不执行递增
  if (currentNumber >= 100) {
    mensagem.innerHTML = "<em>哇，数到100啦，要不要点我重置重新来？</em>";
    mensagem.classList.add("reset-tip");
    return;
  }
  currentNumber++;
  currentNumberWrapper.innerHTML = currentNumber;
});

// 减按钮监听
subtrair.addEventListener("click", function() {
  // 先判断是否到下限-10，到了就改提示、加可重置样式，直接返回不执行递减
  if (currentNumber <= -10) {
    mensagem.innerHTML = "<em>已经数到-10啦，要不要点我重置重新来？</em>";
    mensagem.classList.add("reset-tip");
    return;
  }
  currentNumber--;
  currentNumberWrapper.innerHTML = currentNumber;
});

// 提示区域点击重置逻辑，不用写内联onclick
mensagem.addEventListener("click", function() {
  if (mensagem.classList.contains("reset-tip")) {
    currentNumber = 0;
    currentNumberWrapper.innerHTML = currentNumber;
    mensagem.innerHTML = "<em>点击按钮即可增减显示的数字</em>";
    mensagem.classList.remove("reset-tip");
  }
});

需要补的基础知识点 #

• JS运算符区分：=是赋值操作，作用是把右边的值存入左边变量；==是宽松相等比较，会自动转换类型判断值是否相等；===是严格相等比较，必须值和类型完全一致才返回true，写判断条件优先用===，避免隐式类型转换导致的奇怪bug。
• 阈值判断逻辑顺序：所有限制数值范围的场景，都要先判断是否越界，再执行修改值的操作，如果先改值再判断，必然会出现多改一次的越界问题。
• 样式实现优先用CSS：类似鼠标悬停变手型、加下划线这类视觉效果，直接写CSS类实现就行，不需要单独写mouseenter/mouseleave事件监听去手动改style，代码量少还好维护。
• 事件绑定统一写法：既然要求用addEventListener实现交互，就不要在HTML标签里写onclick/onmouseenter这类内联事件属性，所有逻辑统一放在JS文件里，后期改功能不用翻HTML找代码。

你之前写的最终版本虽然能跑，但是冗余代码太多，用上面的写法逻辑更清晰，代码量也少一半，完全符合作业要求。

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