本文详解一个常见 JS 计算器逻辑缺陷：点击运算符后仅拼接数字而未触发实际计算，核心原因在于按钮文本含空格导致符号匹配失败，以及关键状态变量 previousOperator 未及时赋值。
本文详解一个常见 js 计算器逻辑缺陷：点击运算符后仅拼接数字而未触发实际计算，核心原因在于按钮文本含空格导致符号匹配失败，以及关键状态变量 `previousoperator` 未及时赋值。
在构建基础 JavaScript 计算器时，一个典型却隐蔽的 Bug 是：界面能正常显示输入数字（如 5, +, 3），但点击 = 后结果始终为 53 而非 8——即“只拼接、不计算”。你提供的代码正体现了这一问题，其根本症结在于两个关键疏漏：
? 问题一：按钮文本含不可见空格，导致运算符匹配失败
HTML 中按钮内容常因缩进/换行产生前后空格（例如 <button> ÷ </button> 的 textContent 实际为 " ÷ "）。而你的 handleButtonClick() 函数直接用 switch (symbol) 匹配 '÷'、'×' 等符号，空格会导致匹配全部失败，最终落入 default 分支，误将运算符当作数字处理（调用 handleNumber(symbol)），从而不断拼接到 buffer 中。
✅ 修复方案：在事件监听中对 textContent 调用 .trim() 清除空白字符：
function init() {
for (let i = 0; i < all_buttons.length; i++) {
let button = all_buttons[i];
button.addEventListener('click', function (evt) {
handleButtonClick(evt.target.textContent.trim()); // ✅ 关键修复：去除空格
console.log('button clicked');
});
}
}? 问题二：previousOperator 未被正确赋值，导致 mathOperator() 无操作依据
mathOperator() 函数依赖 previousOperator 判断应执行加减乘除，但原代码中 handleMath() 内部从未给 previousOperator 赋值。因此该变量始终保持 undefined，所有 if/else if 分支均不执行，runningTotal 值恒为初始值（如首次输入 5 后按 +，runningTotal 仍为 0；再输 3 按 = 时，因 previousOperator === null 直接 return，无任何计算）。
立即学习“Java免费学习笔记（深入）”；
✅ 修复方案：在 handleMath() 中明确设置 previousOperator = symbol：
function handleMath(symbol) {
if (buffer === '0') return;
const intBuffer = parseFloat(buffer);
if (runningTotal === 0) {
runningTotal = intBuffer;
} else {
handleButtonClick(intBuffer); // 触发上一步运算（⚠️注意：此设计有递归风险，见下方说明）
}
previousOperator = symbol; // ✅ 关键修复：保存当前运算符
buffer = '0';
}⚠️ 额外重要提醒：避免递归调用陷阱
当前修复后的 handleMath() 中存在 handleButtonClick(intBuffer) 调用，这会再次进入主逻辑，可能引发意外行为（如多次更新屏幕、状态混乱）。更健壮的设计是分离“触发运算”与“设置运算符”逻辑：
// 推荐重构：在 handleMath 中直接执行上一步运算，而非递归调用
function handleMath(symbol) {
if (buffer === '0') return;
const intBuffer = parseFloat(buffer);
if (runningTotal !== 0 && previousOperator) {
mathOperator(intBuffer); // 立即执行上一次运算
}
// 重置：以当前数字为新起点，记录新运算符
runningTotal = intBuffer;
previousOperator = symbol;
buffer = '0';
}同时，确保 mathOperator() 中对除零等边界情况做防护（如 ÷ 运算前检查 intBuffer !== 0）。
✅ 最终验证要点
- 所有按钮 textContent.trim() 后应精确匹配 '+', '-', '×', '÷', '%'；
- previousOperator 在每次点击运算符后必须被赋予对应符号；
- = 按钮逻辑需先基于 previousOperator 执行 mathOperator(buffer)，再更新显示；
- 使用 console.log() 在关键节点（如 handleMath, mathOperator, = 分支）输出 runningTotal, buffer, previousOperator 值，辅助调试。
通过这两处精准修正——清理输入空格与正确维护运算符状态——你的计算器即可准确执行链式运算（如 5 × 3 + 2 = 17），告别“只拼接不计算”的困扰。
