JavaScript计算器点击运算符后重置显示屏异常排查

问题现象 #

实现计算器交互时，目标逻辑为：点击运算符按键后，再次点击数字按键则重置显示屏内容，用于输入第二个运算数。实际运行时触发该判断后，显示屏最多仅能显示1位数字，无法连续输入多位数字。

故障原因 #

代码存在三个核心问题：

• 重复编写了两套数字按键输入处理逻辑，靠前的无状态判断逻辑会先执行，干扰后续带状态判断的逻辑运行
• 点击运算符后仅将previousKeyType标记设为operator，但输入第一位数字后没有重置该标记，导致后续每次点击数字时，previousKeyType === "operator"的判断始终成立，每次都会用新按的数字覆盖整个显示屏内容，无法追加输入多位数字
• 小数点输入逻辑未适配前序按键类型判断，点击运算符后直接点小数点会出现显示异常

修复步骤 #

• 删除靠前的重复数字输入处理代码块
• 在数字、小数点输入逻辑执行完成后，将previousKeyType标记重置为number
• 给小数点输入逻辑增加前序按键类型判断，适配运算符后输入小数的场景

修复后核心代码 #

// 四则运算基础函数
function add(num1, num2) {
  return num1 + num2;
}

function subtract(num1, num2) {
  return num1 - num2;
}

function multiply(num1, num2) {
  return num1 * num2;
}

function divide(num1, num2) {
  if(num2 === 0) return "错误";
  return num1 / num2;
}

function operator(sign, num1, num2) {
  if (sign === "+") return add(num1, num2);
  if (sign === "-") return subtract(num1, num2);
  if (sign === "*") return multiply(num1, num2);
  if (sign === "/") return divide(num1, num2);
}

const keys = document.querySelector(".calc-keys");
const display = document.querySelector(".calc-display");
const wholeCalc = document.querySelector(".calc-container");

keys.addEventListener("click", (event) => {
  if (!event.target.matches("button")) return;
  const key = event.target;
  const action = key.dataset.action;
  const keyContent = key.textContent;
  const displayNum = display.textContent;
  const previousKeyType = wholeCalc.dataset.previousKeyType;

  // 数字按键处理
  if (!action) {
    if (displayNum === "0" || previousKeyType === "operator") {
      display.textContent = keyContent;
    } else {
      display.textContent = displayNum + keyContent;
    }
    // 输入数字后重置前序按键标记
    wholeCalc.dataset.previousKeyType = "number";
  }

  // 小数点按键处理
  if (action === "decimal") {
    if (previousKeyType === "operator") {
      display.textContent = "0.";
    } else if (!displayNum.includes(".")) {
      display.textContent = displayNum + ".";
    }
    // 输入小数点后重置前序按键标记
    wholeCalc.dataset.previousKeyType = "number";
  }

  // 运算符按键处理
  if (["add", "subtract", "multiply", "divide"].includes(action)) {
    wholeCalc.dataset.previousKeyType = "operator";
    // 可在此处补充存储第一个运算数、记录选中运算符的逻辑
  }
});

原有CSS、HTML结构无需调整，替换JS逻辑后即可正常实现运算符后的多位数输入。

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