本文详解如何修复js计算器中“仅拼接数字、不执行运算”的核心缺陷，重点解决按钮文本含不可见空格导致的符号匹配失败，以及previousoperator未赋值致使运算逻辑失效的问题。
本文详解如何修复js计算器中“仅拼接数字、不执行运算”的核心缺陷，重点解决按钮文本含不可见空格导致的符号匹配失败，以及previousoperator未赋值致使运算逻辑失效的问题。
在构建 JavaScript 计算器时，一个常见却隐蔽的陷阱是：界面能正常显示输入数字，但点击 +、−、×、÷ 或 = 后始终只做字符串拼接，而非数学运算。你遇到的正是这一典型问题——表面无报错，实则逻辑断裂。
根本原因有两个：
按钮文本含不可见空白字符
HTML 中 <button> 标签内的换行与缩进会生成空格或换行符（如 "\n ÷\n "），导致 evt.target.textContent 返回带前后空格的字符串（如 " ÷ "）。而你的 switch 语句严格匹配 '÷'，自然无法进入对应分支，最终落入 default 执行 handleNumber(symbol)，把运算符当作数字处理，造成“只拼接、不计算”。previousOperator 始终为 undefined
在 handleMath(symbol) 中，你调用了 mathOperator(symbol)，但从未给 previousOperator 赋值。因此当后续点击 = 时，if (previousOperator == null) 恒为真，直接 return，跳过所有运算逻辑；即使侥幸进入 mathOperator()，因 previousOperator 是 undefined，所有 if/else if 条件均不成立，runningTotal 完全不变。
✅ 正确修复方式如下：
第一步：清理按钮文本空格
在事件监听中对 textContent 调用 .trim()，确保获取纯净符号：
button.addEventListener('click', function (evt) {
handleButtonClick(evt.target.textContent.trim()); // ← 关键修复！
console.log('button clicked');
});第二步：正确设置当前运算符
在 handleMath() 中，必须显式赋值 previousOperator = symbol，且该赋值需在 mathOperator() 调用之前（因为 mathOperator() 依赖它）：
function handleMath(symbol) {
if (buffer === '0') return;
const intBuffer = parseFloat(buffer);
if (runningTotal === 0) {
runningTotal = intBuffer;
} else {
// 注意：此处原逻辑有误，不应递归调用 handleButtonClick(intBuffer)
// 正确做法是先执行上一次运算，再更新状态（见下方优化建议）
mathOperator(intBuffer); // 先完成上一轮计算
}
previousOperator = symbol; // ← 关键修复！必须在此赋值
buffer = '0';
}⚠️ 补充重要修正（原答案未提及但实际必需）：
原代码中 handleMath() 内的 handleButtonClick(intBuffer) 是严重错误——它会再次触发完整流程，引发无限递归或逻辑混乱。应改为直接调用 mathOperator(intBuffer) 完成上一步累积运算，再更新 previousOperator。
最终推荐的 handleMath 精简版：
立即学习“Java免费学习笔记（深入）”；
function handleMath(symbol) {
if (buffer === '0') return;
const intBuffer = parseFloat(buffer);
// 若已有 pending 运算符，先执行上一次运算
if (previousOperator && runningTotal !== 0) {
mathOperator(intBuffer);
} else {
runningTotal = intBuffer; // 首次输入数字，设为初始值
}
previousOperator = symbol; // 记录本次操作符
buffer = '0'; // 清空缓冲区，等待下个数字
}此外，确保 mathOperator() 对除零等边界情况有防护（例如 ÷ 时检查 intBuffer !== 0），并在 = 处理中重置 previousOperator = null，避免连续等号异常。
总结：一个健壮的计算器核心在于精确的状态管理——buffer（当前输入）、runningTotal（累计结果）、previousOperator（待执行的运算符）三者必须同步更新，且所有用户输入（包括空格、换行）必须预处理。看似微小的 .trim() 和一行赋值，恰恰是连接 UI 与逻辑的关键桥梁。
