Vanilla JavaScript计算器按钮点击无屏幕渲染问题求助

1. 优先检查DOM元素是否正确获取 #

你的代码通过document.querySelector(".screen")获取显示屏幕元素，如果HTML中没有类名完全匹配的.screen元素（比如拼写错误、大小写不一致），screen变量会是null。此时执行screen.innerText = buffer会抛出错误，直接阻断渲染逻辑。

验证方法：在代码开头添加一行调试输出：

const screen = document.querySelector(".screen");
console.log(screen); // 控制台输出null则说明元素未找到

修复：确保HTML中存在<div class="screen"></div>（或对应标签），类名和代码中的选择器完全一致。

2. 事件委托范围过滤不严谨 #

当前事件监听绑定在.calc-buttons容器上，若点击到容器的空白区域或按钮内部的子元素（如<span>），event.target.innerText可能为空或非预期值，导致逻辑异常。

修复：修改init函数，只处理按钮标签的点击：

function init() {
  document.querySelector(".calc-buttons").addEventListener("click", function (event) {
    // 仅响应button元素的点击
    if (event.target.tagName === "BUTTON") {
      buttonClick(event.target.innerText);
    }
  });
}

3. 类型一致性问题 #

在handleSymbol的"="分支中，buffer = +runningTotal会将buffer转为数字类型，后续点击数字时虽然能通过隐式转换拼接字符串，但可能引发潜在的类型逻辑问题。

修复：将数字转为字符串，保持buffer的类型统一：

buffer = runningTotal.toString();

4. 初始值判断逻辑统一 #

previousOperator初始值为undefined，但在"="分支中判断的是previousOperator === null，虽然不影响核心功能，但统一初始值能避免边界场景的逻辑混乱：

修复：将let previousOperator;改为：

let previousOperator = null;

修复后的核心代码片段 #

let runningTotal = 0;
let buffer = "0";
let previousOperator = null;
const screen = document.querySelector(".screen");

function handleSymbol(value) {
  switch (value) {
    case "C":
      buffer = "0";
      runningTotal = 0;
      break;
    case "=":
      if (previousOperator === null) {
        return;
      }
      flushOperation(parseInt(buffer));
      previousOperator = null;
      buffer = runningTotal.toString();
      runningTotal = 0;
      break;
    case "←":
      if (buffer.length === 1) {
        buffer = "0";
      } else {
        buffer = buffer.substring(0, buffer.length - 1);
      }
      break;
    case "+":
    case "-":
    case "×":
    case "÷":
      handleMath(value);
      break;
  }
}

function init() {
  document.querySelector(".calc-buttons").addEventListener("click", function (event) {
    if (event.target.tagName === "BUTTON") {
      buttonClick(event.target.innerText);
    }
  });
}

init();

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