计算器concat函数失效？if/else语句逻辑排查求助

核心问题拆解 #

你遇到的expressionMaker函数else分支不生效、逻辑异常，是由语法错误、条件判断逻辑错误和API使用错误共同导致的，以下是具体问题点和修复方案：

具体问题与修复 #

1. 事件目标判断错误

   • 原代码中EventTarget == numbers完全不成立：numbers是querySelectorAll返回的NodeList集合，而点击事件的target是单个按钮元素，且expressionMaker函数未接收事件对象，无法获取点击目标。
   • 修复：给expressionMaker传入event参数，通过numbers.contains(event.target)判断点击的是否为数字按钮。

2. 首个if分支逻辑优先级错误

   • 原条件if (EventTarget == numbers && expression.a == 0 || expression.operand == 0)逻辑优先级混乱，实际解析为(目标是数字且a=0) 或者 operand=0，导致选择运算符后输入数字仍会进入第一个分支修改expression.a，而非进入else分支修改expression.b。
   • 修复：用括号明确优先级，调整为if (numbers.contains(event.target) && (expression.a === 0 || expression.operand === 0))。

3. 语法错误导致代码中断

   • 运算符按钮的点击事件中存在多余的右括号（如expression.operand = "+")），直接导致JS语法错误，代码无法正常执行。
   • 修复：删除多余的右括号，改为expression.operand = "+";。

4. 工厂函数未执行

   • calculate是未执行的立即执行函数表达式(IIFE)，直接调用calculate.add会抛出"不是函数"的错误。
   • 修复：给IIFE加上执行括号，改为const calculate = (() => {...})();。

5. 其他细节问题

   • 重复绑定clear按钮的点击事件，保留一个即可；
   • HTML中所有数字按钮使用重复的id="nums"，违反id唯一性规则，改为仅保留class；
   • expression.b更新后未同步到display，添加display.innerHTML = expression.b；
   • 数值拼接后是字符串类型，计算时需要转为数字，避免字符串拼接而非数值运算。

修复后的完整代码 #

JavaScript 代码

const btn = document.getElementById("calculatorGrid");
const display = document.getElementById("display");
const miniscreen = document.getElementById("miniScreen")
const equals = document.getElementById("evaluate")
const numbers = document.querySelectorAll(".Nbuttons");
const clear = document.getElementById("clear");
const add = document.getElementById("plus");
const sub = document.getElementById("subtract");
const multi = document.getElementById("multiply");
const divi = document.getElementById("divide");
const operators = document.querySelectorAll(".operators");

// 执行工厂函数
const calculate = (() => {
  const add = (a, b) => Number(a) + Number(b);
  const sub = (a, b) => Number(a) - Number(b);
  const mul = (a, b) => Number(a) * Number(b);
  const div = (a, b) => Number(a) / Number(b);
  return {
    add,
    sub,
    mul,
    div,
  };
})();

const expression = {
  a: 0,
  operand: 0,
  b: 0,
};

// 接收event参数，正确判断点击目标
function expressionMaker(event, keyValue) {
  const concat = (a, b) => "" + a + b;

  if (numbers.contains(event.target) && (expression.a === 0 || expression.operand === 0)) {
    if (expression.a === 0) {
       expression.a = keyValue
    } else if (expression.a > 0) {
      expression.a = concat(expression.a, keyValue)
    }
    display.innerHTML = expression.a
  } else if (numbers.contains(event.target) && expression.a > 0 && expression.operand !== 0) {
    if (expression.b === 0) {
      expression.b = keyValue
    } else {
      expression.b = concat(expression.b, keyValue)
    }
    // 更新display显示第二个数
    display.innerHTML = expression.b
  }
}

function evaluate() {
  let result 
  if (expression.operand === "+") {
    result = calculate.add(expression.a, expression.b)
  } else if (expression.operand === "-") {
    result = calculate.sub(expression.a, expression.b)
  } else if (expression.operand === "x") {
    result = calculate.mul(expression.a, expression.b)
  } else if (expression.operand === "/") {
    result = calculate.div(expression.a,  expression.b)
  } else {
    return null
  }
  display.innerHTML = result
  // 计算后重置表达式，方便后续操作
  expression.a = result;
  expression.operand = 0;
  expression.b = 0;
  return result
}

// 保留一个clear事件绑定
clear.addEventListener("click", () => {
  display.textContent = 0
  expression.a = 0
  expression.operand = 0
  expression.b = 0
})

equals.addEventListener("click", () => {
  evaluate()
})

// 修复语法错误，新增迷你屏显示表达式
add.addEventListener("click", () => {
  expression.operand = "+";
  miniscreen.innerHTML = `${expression.a} +`;
})
sub.addEventListener("click", () => {
  expression.operand = "-";
  miniscreen.innerHTML = `${expression.a} -`;
}) 
multi.addEventListener("click", () => {
  expression.operand = "x";
  miniscreen.innerHTML = `${expression.a} x`;
})
divi.addEventListener("click", () => {
  expression.operand = "/";
  miniscreen.innerHTML = `${expression.a} /`;
})

numbers.forEach(function(element) {
    element.addEventListener("click", function(event) {
        let keyValue = event.target.textContent
        // 传入event参数
        expressionMaker(event, keyValue)
    });
});

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="styles.css">
</head>
<body>
<div id="display">
    <div id="miniScreen"></div>
</div>
<div id="calculatorGrid">
    <!-- 移除重复id，保留class -->
    <button class="Nbuttons" data-number="1">1</button>
    <button class="Nbuttons" data-number="2">2</button>
    <button class="Nbuttons" data-number="3">3</button>
    <button class="Nbuttons" data-number="4">4</button>
    <button class="Nbuttons" data-number="5">5</button>
    <button class="Nbuttons" data-number="6">6</button>
    <button class="Nbuttons" data-number="7">7</button>
    <button class="Nbuttons" data-number="8">8</button>
    <button class="Nbuttons" data-number="9">9</button>
    <button class="Nbuttons" data-number="0">0</button>
    <button class="operators" id="plus" data-operator="+">+</button>
    <button class="operators" id="subtract" data-operator="-">-</button>
    <button class="operators" id="multiply" data-operator="*">x</button>
    <button class="operators" id="divide" data-operator="/">÷</button>
    <button id="clear">clear</button>
    <button id="evaluate"> =</button>
</div>
<script src="script.js" defer></script>
</body>
</html>

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