JavaScript计算器实现两数相加功能异常问题求助

问题根因 #

1. 全局变量命名冲突：你定义的全局变量val命名过于通用，和你引入的jQuery、Bootstrap等第三方库的全局变量重名，第三方库运行时会修改该变量的值，导致存储的运算数被篡改，就会出现结果为预期值512倍的异常。
2. 逻辑结构不规范：你把加、等号的判断逻辑放在了数字id遍历的循环内部，属于冗余写法，后续扩展功能时容易触发逻辑错误。
3. 脚本加载顺序错误：自定义JS文件放在head顶部，早于第三方库和DOM加载，容易触发DOM操作相关的异常。

修复方案 #

1. 修改JS代码 #

重命名变量避免冲突，调整逻辑结构，新增异常兼容处理：

var firstNum = 0;
var operator = "";

function calculate(clicked_id) {
  var numIds = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  var isNum = false;

  // 仅处理数字按钮逻辑
  for (var i = 0; i < numIds.length; i++) {
    if (clicked_id == numIds[i]) {
      document.getElementById("input").value += clicked_id;
      isNum = true;
      break;
    }
  }

  // 处理运算符、等号逻辑
  if (!isNum) {
    if (clicked_id == "add") {
      firstNum = parseInt(document.getElementById("input").value) || 0;
      document.getElementById("input").value = "";
      operator = "plus";
    } else if (clicked_id == "equal") {
      var secondNum = parseInt(document.getElementById("input").value) || 0;
      document.getElementById("input").value = "";
      if (operator == "plus") {
        var result = firstNum + secondNum;
        document.getElementById("input").value = String(result);
        // 运算完成重置状态，避免重复点击等号异常
        firstNum = 0;
        operator = "";
      }
    }
  }
}

2. 修改HTML代码 #

调整自定义脚本的加载位置，放到body末尾、所有第三方库加载完成之后：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

  <title>计算器</title>
</head>

<body>

  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <h1>Calculator</h1>
      <p>Designed by Nabil.</p>
    </div>
  </div>

  <div class="form-group">
    <input type="text" id="input" placeholder="">
  </div>

  <div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-dark" id="0" onclick="calculate(this.id)">0</button>
    <button type="button" class="btn btn-light" id="1" onclick="calculate(this.id)">1</button>
    <button type="button" class="btn btn-light" id="2" onclick="calculate(this.id)">2</button>
    <button type="button" class="btn btn-light" id="3" onclick="calculate(this.id)">3</button>
    <button type="button" class="btn btn-light" id="4" onclick="calculate(this.id)">4</button>
    <button type="button" class="btn btn-light" id="5" onclick="calculate(this.id)">5</button>
    <button type="button" class="btn btn-light" id="6" onclick="calculate(this.id)">6</button>
    <button type="button" class="btn btn-light" id="7" onclick="calculate(this.id)">7</button>
    <button type="button" class="btn btn-light" id="8" onclick="calculate(this.id)">8</button>
    <button type="button" class="btn btn-light" id="9" onclick="calculate(this.id)">9</button>
    <button type="button" class="btn btn-secondary" id="add" onclick="calculate(this.id)">+</button>
    <button type="button" class="btn btn-secondary" id="equal" onclick="calculate(this.id)">=</button>
  </div>
  <!-- 自定义脚本移到此处加载 -->
  <script src="script.js"></script>
</body>

</html>

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