JavaScript计算器全局变量operator无法更新问题求助

你的代码中operator全局变量实际上能被正确修改，你误以为它仅局部生效，核心原因是计算完成后没有更新界面显示，也未处理状态重置，导致视觉上看不到计算结果，进而误以为运算符未生效。以下是具体修复方案：

修复要点 #

• 在calculate函数中添加界面更新逻辑，将计算结果展示到屏幕上
• 增加空值校验，避免未输入数字就触发计算导致的错误
• 完善计算后的状态流转，让结果可作为下一轮计算的初始值
• 补充AC（清空）和Del（删除）按钮的功能，提升计算器可用性

修复后的完整代码 #

JavaScript 代码 #

let current_number = "";
let operator = "";
let previous = "";
const disp = document.querySelector("#current");
const prev = document.querySelector("#previous");
const equal = document.querySelector("#equal");
const acBtn = document.querySelector("button:nth-child(2)");
const delBtn = document.querySelector("button:nth-child(3)");

equal.addEventListener("click", calculate);
acBtn.addEventListener("click", clearAll);
delBtn.addEventListener("click", deleteLast);

const numberBtns = document.querySelectorAll(".digit");
const operBtns = document.querySelectorAll(".operation");

numberBtns.forEach((element) => {
  element.addEventListener("click", function(e) {
    handleNumber(e.target.textContent);
    disp.textContent = current_number;
  });
});

operBtns.forEach((element) => {
  element.addEventListener("click", (e) => {
    // 避免未输入数字就点击运算符
    if (!current_number) return;
    // 如果已有运算符，先执行一次计算
    if (operator && previous) {
      calculate();
    }
    handleOperator(e.target.textContent);
    prev.textContent = `${previous} ${operator}`;
    disp.textContent = current_number;
  });
});

function handleNumber(num) {
  // 限制数字长度，避免显示溢出
  if (current_number.length < 10) {
    // 避免重复输入小数点
    if (num === "." && current_number.includes(".")) return;
    current_number += num;
  }
}

function handleOperator(op) {
  operator = op;
  previous = current_number;
  current_number = "";
}

function calculate() {
  // 校验输入合法性
  if (!operator || !previous || !current_number) return;
  
  let prevNum = Number(previous);
  let currNum = Number(current_number);
  let result;

  switch(operator) {
    case "+":
      result = prevNum + currNum;
      break;
    case "-":
      result = prevNum - currNum;
      break;
    case "*":
      result = prevNum * currNum;
      break;
    case "/":
      // 避免除以0
      result = currNum === 0 ? "Error" : prevNum / currNum;
      break;
    default:
      return;
  }

  // 更新显示和状态
  prev.textContent = "";
  disp.textContent = result;
  // 将结果转为字符串，作为下一轮计算的初始值
  previous = result.toString();
  current_number = "";
  operator = "";
}

function clearAll() {
  current_number = "";
  operator = "";
  previous = "";
  disp.textContent = "";
  prev.textContent = "";
}

function deleteLast() {
  current_number = current_number.slice(0, -1);
  disp.textContent = current_number;
}

CSS 代码 #

* {
  box-sizing: border-box;
}
body {
  padding: 0;
  margin: 0;
  background: linear-gradient(to right, #2a92c7, #00ffc6);
}
#container {
  display: flex;
  justify-content: center;
  min-height: 100vh;
}
.btn {
  border: 1px solid white;
  border-radius: 0;
  font-size: 1.2rem;
}
#main {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  height: 100px;
  padding: 1rem;
}
#current {
  font-size: 2rem;
  word-wrap: break-word;
}
#previous {
  font-size: 1.2rem;
  opacity: 0.7;
}
#display {
  background-color: rgba(13, 42, 6, 0.7);
  padding: 1rem;
  border-radius: 0.5rem;
}
.btn:hover {
  background-color: rgba(158, 160, 162, 0.8);
}
.digit {
  font-weight: 900;
}

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>计算器</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="styles.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="container-fluid">
      <div
        class="row text-light align-items-center justify-content-center"
        style="min-height: 100vh"
      >
        <div id="display" class="col-sm-5 col-xl-4">
          <div class="row">
            <div id="main" class="col-12 bg-gradient">
              <div id="previous" class="col"></div>
              <div id="current" class="col"></div>
            </div>
            <button class="col-6 btn btn-secondary shadow-none">AC</button>
            <button class="col-3 btn btn-secondary shadow-none">Del</button>
            <button class="operation col-3 btn btn-secondary shadow-none">
              /
            </button>
            <button class="digit col-3 btn btn-secondary shadow-none">1</button>
            <button class="digit col-3 btn btn-secondary shadow-none">2</button>
            <button class="digit col-3 btn btn-secondary shadow-none">3</button>
            <button class="col-3 btn btn-secondary shadow-none operation">
              *
            </button>
            <button class="digit col-3 btn btn-secondary shadow-none">4</button>
            <button class="digit col-3 btn btn-secondary shadow-none">5</button>
            <button class="digit col-3 btn btn-secondary shadow-none">6</button>
            <button class="col-3 btn btn-secondary shadow-none operation">
              -
            </button>
            <button class="digit col-3 btn btn-secondary shadow-none">7</button>
            <button class="digit col-3 btn btn-secondary shadow-none">8</button>
            <button class="digit col-3 btn btn-secondary shadow-none">9</button>
            <button class="col-3 btn btn-secondary shadow-none operation">
              +
            </button>
            <button
              id="dicim"
              class="digit col-3 btn btn-secondary shadow-none"
            >
              .
            </button>
            <button class="digit col-3 btn btn-secondary shadow-none">0</button>
            <button id="equal" class="col-6 btn btn-secondary shadow-none">
              =
            </button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

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