JavaScript入门：计算器加号、等号运算符功能异常求助

核心问题分析 #

1. 运算符拼接格式错误：点击加号时给fullExpression添加了带空格的" +"，还把currentInput设为空格，导致最终表达式格式混乱，eval()无法正确解析。
2. 未执行计算与屏幕更新：等号按钮仅拼接了表达式，没有触发计算逻辑，也未将结果显示到屏幕上。
3. 部分按钮无绑定事件：4-9、0、小数点等数字按钮未添加点击事件，无法输入完整数字。
4. 符号不兼容JS语法：乘法用的x、除法用的÷，这两个符号eval()无法识别，需替换为JS支持的*和/。

具体修复步骤 #

• 统一表达式格式：运算符拼接时不加多余空格，点击运算符后清空currentInput（设为空字符串而非空格），同时更新屏幕显示完整表达式。
• 实现计算逻辑：等号按钮中先替换不兼容符号，再用eval()计算结果，最后更新屏幕并重置状态支持后续运算。
• 批量绑定按钮事件：通过遍历统一处理所有按钮，减少重复代码。
• 输入校验与错误处理：禁止无效输入（如重复小数点、开头输入运算符），用try-catch处理非法表达式报错。

修改后的完整代码 #

JavaScript部分

"use strict";

// 获取DOM元素
const screen = document.querySelector(".screen");
const buttons = document.querySelectorAll(".buttons");

// 计算器状态管理
let currentInput = "";
let fullExpression = "";
let result = "";

// 统一处理所有按钮点击事件
buttons.forEach(button => {
  button.addEventListener("click", () => {
    const btnText = button.textContent;
    
    // 数字与小数点处理
    if (/[0-9.]/.test(btnText)) {
      // 避免重复输入小数点
      if (btnText === "." && currentInput.includes(".")) return;
      currentInput += btnText;
      screen.textContent = currentInput;
    } 
    // 运算符处理
    else if (/[+\-x÷]/.test(btnText)) {
      // 禁止开头直接输入运算符
      if (!currentInput && !fullExpression) return;
      // 替换为JS兼容的运算符
      const jsOperator = btnText === "x" ? "*" : btnText === "÷" ? "/" : btnText;
      fullExpression += currentInput + jsOperator;
      currentInput = "";
      screen.textContent = fullExpression;
    } 
    // 等号计算处理
    else if (btnText === "=") {
      if (!currentInput || !fullExpression) return;
      const finalExpression = fullExpression + currentInput;
      try {
        result = eval(finalExpression);
        screen.textContent = result;
        // 重置状态，支持连续运算
        fullExpression = "";
        currentInput = result.toString();
      } catch (err) {
        screen.textContent = "Error";
        currentInput = "";
        fullExpression = "";
      }
    } 
    // 清空处理
    else if (btnText === "C") {
      currentInput = "";
      fullExpression = "";
      screen.textContent = "";
    }
    // 括号功能可后续扩展
  });
});

HTML与CSS部分保持原有代码不变

关键改动说明 #

1. 批量事件绑定：通过遍历所有按钮统一处理逻辑，避免重复编写单个按钮的事件绑定代码。
2. 符号兼容转换：自动将x转为*、÷转为/，确保表达式符合JS语法规范。
3. 输入合法性校验：拦截重复小数点、开头运算符等无效输入，减少错误表达式。
4. 错误捕获：用try-catch包裹eval()，非法表达式时显示错误提示并重置状态。
5. 连续运算支持：计算完成后将结果设为下一次输入的初始值，可直接继续运算。

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