Vanilla JS实现加减按钮点击改数值时出现NaN异常求助

嘿，刚学Vanilla JS就动手做功能很棒！不过你遇到的点击+按钮后显示NaN的问题，我帮你分析下原因并修正～

你的代码问题在哪里？ #

咱们先拆解下你写的JS代码里的错误：

• 事件回调函数里的value参数不小心覆盖了你外层声明的value变量，这个参数其实是浏览器传递的Event事件对象，根本不是你要操作的数值元素！
• 你直接对document.querySelector("#number")返回的DOM节点做value++操作，DOM元素不是数字，直接运算自然会得到NaN。
• 赋值逻辑混乱：add = value++这行完全搞错了操作对象，变量名也和按钮的add混在一起了。

修正后的完整实现 #

你的HTML代码没问题，先保留：

<div class="content">
  <button id="add">+</button>
  <p id="number">0</p>
  <button id="sub">-</button>
</div>

然后是修正后的JavaScript代码，我还顺便帮你实现了减按钮的功能：

// 先获取需要操作的DOM元素
const numberDisplay = document.querySelector("#number");
const addButton = document.querySelector("#add");
const subButton = document.querySelector("#sub");

// 定义变量存储当前数值，初始从DOM文本转成数字
let currentNumber = parseInt(numberDisplay.textContent);

// 加按钮点击事件
addButton.addEventListener("click", function() {
  currentNumber++;
  numberDisplay.textContent = currentNumber;
});

// 减按钮点击事件
subButton.addEventListener("click", function() {
  currentNumber--;
  numberDisplay.textContent = currentNumber;
});

为什么这样改？ #

1. 变量命名更清晰：用numberDisplay指代显示数值的p标签，currentNumber存储当前数值，避免变量名混淆。
2. 数值类型转换：用parseInt()把DOM里的文本字符串转成整数，确保后续的加减都是数值运算。
3. 避免参数覆盖：回调函数里不再用value作为参数，防止覆盖外层的数值变量。
4. 分离逻辑：先更新内存里的currentNumber，再把新值同步到DOM显示，逻辑更清晰。

现在点击+按钮，数值会从0变成1，点击-按钮会变成-1，完全符合你的预期啦！

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