计算器应用点击等号仅显示0，operate函数疑似故障求助

核心问题 #

你的计算器点击等号无反应的原因有两个：

1. 等号的事件逻辑错误：等号按钮带有operator-key类，点击时会触发setOperator函数，把operator设为=，同时切换isFirstNum为false，但根本没调用operate()执行计算。
2. operate函数未处理等号逻辑：就算调用了operate()，switch语句里没有case "="的分支，会进入default，total保持初始值0，最终显示0。

修复步骤 #

1. 给等号按钮单独绑定计算事件

在现有代码末尾添加等号的点击事件监听，触发计算逻辑：

const equalsBtn = document.querySelector("#equals");
equalsBtn.addEventListener("click", () => {
  // 确保num1、num2和运算符都有有效值才执行计算
  if (num1 && num2 && operator) {
    operate();
  }
});

2. 优化setOperator函数（避免等号误触发运算符设置）

修改setOperator函数，跳过等号按钮的运算符设置逻辑：

function setOperator() {
  operatorKeys.forEach((key) => {
    key.addEventListener("click", () => {
      // 跳过等号，不执行运算符设置
      if (key.innerHTML === "=") return;
      operator = key.innerHTML;
      isFirstNum = false;
      operatorDisplay();
    });
  });
}

3. 增强operate函数的鲁棒性（可选）

添加输入有效性校验，避免空值或非法输入导致的NaN，同时处理除数为0的情况：

function operate() {
  let total = 0;
  const n1 = parseFloat(num1);
  const n2 = parseFloat(num2);
  
  // 校验输入有效性
  if (isNaN(n1) || isNaN(n2) || !operator) {
    result.innerHTML = "Error";
    return;
  }

  switch (operator) {
    case '+':
      total = n1 + n2;
      break;
    case '-':
      total = n1 - n2;
      break;
    case '*':
      total = n1 * n2;
      break;
    case '/':
      // 处理除数为0的异常
      total = n2 === 0 ? "Error" : n1 / n2;
      break;
    default:
      result.innerHTML = "Error";
      return;
  }

  result.innerHTML = total;
  num1 = total.toString();
  num2 = "";
  operator = "";
  isFirstNum = true;
}

完整修改后的JavaScript代码 #

const numberKeys = document.querySelectorAll('.number-key');
const operatorKeys = document.querySelectorAll('.operator-key');
const result = document.querySelector('.result');

let num1 = "";
let num2 = "";
let operator = "";
let isFirstNum = true;

function startingPoint() {
  result.innerHTML = "0";
  num1 = "";
  num2 = "";
  operator = "";
  isFirstNum = true;
}

function numDisplay() {
  numberKeys.forEach((key) => {
    key.addEventListener("click", () => {
      if (isFirstNum) {
        num1 += key.innerHTML;
        result.innerHTML = num1;
      } else {
        num2 += key.innerHTML;
        result.innerHTML = num2;
      }
    });
  });
}

function setOperator() {
  operatorKeys.forEach((key) => {
    key.addEventListener("click", () => {
      if (key.innerHTML === "=") return;
      operator = key.innerHTML;
      isFirstNum = false;
      operatorDisplay();
    });
  });
}

function operatorDisplay() {
  result.innerHTML = operator;
}

function clearDisplay() {
  const clearBtn = document.querySelector("#clear");
  clearBtn.addEventListener("click", () => {
    startingPoint();
  });
}

function operate() {
  let total = 0;
  const n1 = parseFloat(num1);
  const n2 = parseFloat(num2);
  
  if (isNaN(n1) || isNaN(n2) || !operator) {
    result.innerHTML = "Error";
    return;
  }

  switch (operator) {
    case '+':
      total = n1 + n2;
      break;
    case '-':
      total = n1 - n2;
      break;
    case '*':
      total = n1 * n2;
      break;
    case '/':
      total = n2 === 0 ? "Error" : n1 / n2;
      break;
    default:
      result.innerHTML = "Error";
      return;
  }

  result.innerHTML = total;
  num1 = total.toString();
  num2 = "";
  operator = "";
  isFirstNum = true;
}

numDisplay();
setOperator();
clearDisplay();

// 绑定等号按钮的计算事件
const equalsBtn = document.querySelector("#equals");
equalsBtn.addEventListener("click", () => {
  if (num1 && num2 && operator) {
    operate();
  }
});

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