JavaScript增减计数器异常：点击减号首次仍加值求解决方案

你的问题出在后置自增/自减运算符（number++、number--）的特性上：这类运算符会先返回变量的当前值，再对变量进行增减操作，导致显示的数值和实际变量值始终差一步。

举个实际流程：

• 初始number = 0，点击「加数字」，output.innerHTML被设为0（当前值），之后number才变成1。
• 此时点击「减数字」，output.innerHTML被设为1（当前number的值），之后number才变成0。
  所以看起来首次点减号时数值先“加了1”，本质是显示和变量不同步导致的错觉。

修改方法 #

把后置运算符改成前置自增/自减运算符（++number、--number），这类运算符会先更新变量值，再返回新值，确保显示的数值和实际变量完全同步。

修改后的JavaScript代码：

const output = document.getElementById('counter');
const addBtn = document.getElementById('btn-add');
const minusBtn = document.getElementById('btn-minus');
let number = 0;

function increment() {
  output.innerHTML = ++number; // 前置自增：先加1再赋值
}

function decrement() {
  output.innerHTML = --number; // 前置自减：先减1再赋值
}

addBtn.addEventListener('click', increment);
minusBtn.addEventListener('click', decrement);

你也可以选择分开写逻辑，效果完全一致：

function increment() {
  number++;
  output.innerHTML = number;
}

function decrement() {
  number--;
  output.innerHTML = number;
}

这样修改后，点击加/减按钮时，显示的数值会和实际变量值同步，不会再出现首次点减号的异常情况。

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