JavaScript计算器连续运算错误求助：100+100+10+5-100结果异常

你的计算器连续运算错误的核心原因是状态管理逻辑混乱：storage数组的多元素存储、clickCounter的复杂计数，以及连续运算时的运算符与数值传递顺序错误，导致最终计算时使用了错误的中间值。以测试用例100+100+10+5-100为例，错误出现在第三次运算后，storage中残留了历史值，导致后续减法计算时用错了基准数。

修复后的代码 #

const displayElement = document.getElementById("display"),
  buttonElements = document.querySelectorAll("button[meta-operator]");

// 简化状态变量，语义化命名
let currentResult; // 保存当前计算结果
let currentOperator; // 当前选中的运算符
let isWaitingForNumber = false; // 标记是否等待输入新数字（按完运算符后）

const clean = () => {
  buttonElements.forEach((button) => {
    if (button.classList.contains("is-active")) button.classList.remove("is-active");
  });
  currentResult = undefined;
  currentOperator = undefined;
  isWaitingForNumber = false;
  displayElement.value = "";
};

const ac = () => {
  clean();
  displayElement.value = 0;
};

// 独立计算逻辑，清晰易维护
const calculate = (a, operator, b) => {
  switch (operator) {
    case "+":
      return a + b;
    case "-":
      return a - b;
    case "*":
      return a * b;
    case "/":
      return a / b;
    default:
      return b;
  }
};

// 统一处理运算逻辑
const handleOperation = () => {
  const inputValue = Number(displayElement.value);
  if (currentResult === undefined) {
    // 第一次运算，初始化结果
    currentResult = inputValue;
  } else {
    // 连续运算，基于当前结果计算
    currentResult = calculate(currentResult, currentOperator, inputValue);
  }
  displayElement.value = currentResult;
  isWaitingForNumber = true;
};

document.addEventListener("click", (e) => {
  e.preventDefault();

  if (e.target.hasAttribute("meta-number")) {
    // 按完运算符后输入数字，清空显示
    if (isWaitingForNumber || displayElement.value === "0") {
      displayElement.value = "";
      isWaitingForNumber = false;
    }
    displayElement.value += e.target.id;
    // 移除所有运算符的激活状态
    buttonElements.forEach((button) => button.classList.remove("is-active"));
  }

  if (e.target.hasAttribute("meta-operator")) {
    // 连续点击运算符时，先完成上一次运算
    if (currentOperator !== undefined && !isWaitingForNumber) {
      handleOperation();
    }
    // 更新当前运算符与激活状态
    currentOperator = e.target.id;
    buttonElements.forEach((button) => button.classList.remove("is-active"));
    e.target.classList.add("is-active");
    isWaitingForNumber = true;
  }

  if (e.target.hasAttribute("meta-equal")) {
    if (currentOperator !== undefined && !isWaitingForNumber) {
      handleOperation();
      // 计算完成后清除运算符激活状态
      buttonElements.forEach((button) => button.classList.remove("is-active"));
      currentOperator = undefined;
      isWaitingForNumber = true;
    }
  }

  if (e.target.hasAttribute("meta-ac")) {
    ac();
  }
});

关键修复点 #

1. 简化状态管理：去掉复杂的storage数组和clickCounter，用currentResult、currentOperator、isWaitingForNumber三个语义化变量管理状态，避免多元素存储导致的逻辑混乱。
2. 统一运算逻辑：将计算逻辑抽离到calculate函数，让运算规则更清晰，便于后续扩展（比如添加取模、平方等功能）。
3. 修正连续运算流程：点击新运算符时，先完成上一次运算再更新运算符，完全符合常规计算器的行为逻辑。
4. 修复变量拼写错误：原代码中simbol应为symbol，已修正为语义化的currentOperator。

额外建议 #

• 可以添加输入合法性校验（比如禁止连续输入小数点、除法时除数为0的提示）。
• 为按钮添加键盘事件监听，提升计算器的易用性。

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