计算器JS应用出现Uncaught SyntaxError错误，请求排查解决

问题根源 #

1. DOM元素选择失效：HTML里的显示区域未设置id="display"，所有按钮也没有对应id，导致JS无法获取元素，绑定事件失败。
2. 非法表达式触发语法错误：点击等号时，"="会被加入表达式数组，最终生成类似"1+2="的字符串，eval执行时会将其识别为无效的赋值语句，触发Uncaught SyntaxError: Invalid left-hand side in assignment。

修正后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calculator</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="main">
      <div class="calculator">
        <div class="display" id="display"></div>
        <div class="clearButton">Clear</div>
        <div class="deleteButton">Delete</div>
        <div class="btn" id="0">0</div>
        <div class="btn" id="1">1</div>
        <div class="btn" id="2">2</div>
        <div class="btn" id="3">3</div>
        <div class="btn" id="4">4</div>
        <div class="btn" id="5">5</div>
        <div class="btn" id="6">6</div>
        <div class="btn" id="7">7</div>
        <div class="btn" id="8">8</div>
        <div class="btn" id="9">9</div>
        <div class="btn" id="+">+</div>
        <div class="btn" id="-">-</div>
        <div class="btn" id="*">*</div>
        <div class="btn" id="/">/</div>
        <div class="btn" id="=">=</div>
      </div>
    </div>
    <script src="main.js"></script>
  </body>
</html>

修正后的JavaScript代码 #

const calculator = function () {
  const displayText = document.getElementById("display");
  const problem = [];

  const math = function (buttonValue) {
    if (buttonValue !== "=") {
      problem.push(buttonValue);
      displayText.textContent = problem.join("");
    } else {
      const expression = problem.join("");
      try {
        const result = eval(expression);
        displayText.textContent = result;
        problem.length = 0;
        problem.push(result.toString());
      } catch (err) {
        displayText.textContent = "Error";
        problem.length = 0;
      }
    }
  };

  // 批量绑定按钮事件，简化代码
  const buttons = document.querySelectorAll(".btn");
  buttons.forEach(btn => {
    btn.addEventListener("click", function () {
      math(this.textContent);
    });
  });

  const btnClear = document.querySelector(".clearButton");
  btnClear.addEventListener("click", function () {
    displayText.textContent = "";
    problem.length = 0;
  });

  const btnDelete = document.querySelector(".deleteButton");
  btnDelete.addEventListener("click", function () {
    problem.pop();
    displayText.textContent = problem.join("");
  });
};

calculator();

核心修正点 #

• 给DOM元素补充必要的id，确保JS能正确获取并操作元素。
• 调整等号逻辑：点击等号时不再将"="加入表达式，直接用现有表达式计算，避免eval执行非法语句。
• 添加错误捕获，处理除零、非法表达式等异常情况，避免应用崩溃。
• 批量绑定按钮事件，减少重复代码，提升可维护性。

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