JavaScript基础计算器屏幕无显示问题求助

核心问题1：事件逻辑嵌套完全错误 #

你把所有非数字按钮（C、运算符、=）的判断都塞在了if (btn >= '0' && btn <= '9')里面，导致点击这些按钮时代码根本不会进入任何处理分支，这是屏幕无反应的最主要原因。必须把数字判断和非数字判断拆分开。

核心问题2：displayValue函数的两处错误 #

• 你给本身就是p标签的outputNum重新嵌套了p标签，完全没必要，直接赋值文本内容即可。
• ${num2 !== null}会输出布尔值true/false，而非num2的实际数值，应该直接写${num2}。

修改后的displayValue：

const displayValue = () => {
  if (num1 !== null && operator !== null) {
    outputNum.textContent = `${num1} ${operator} ${num2 || ''}`;
  } else if (num1 !== null) {
    // 只输入第一个数时也要显示
    outputNum.textContent = num1;
  }
}

核心问题3：calcul函数的switch语法错误 #

switch只能接收单个表达式，你写的switch(num1, num2, operator)完全无效，应该用switch(operator)。另外，HTML里的乘号是x，但代码里判断的是*，需要统一（这里改JS适配HTML更方便）。

修改后的calcul：

const calcul = (num1, num2, operator) => {
  let result;
  // 处理HTML里的x转成*
  operator = operator === 'x' ? '*' : operator;
  switch (operator) {
    case '+':
      result = num1 + num2;
      break;
    case '-':
      result = num1 - num2;
      break;
    case '*':
      result = num1 * num2;
      break;
    case '/':
      result = num1 / num2;
      break;
    case '%':
      result = num1 % num2;
      break;
    default:
      result = num1; // 默认返回第一个数
  }
  return result;
}

核心问题4：变量赋值遗漏 #

你写的num1 * 10 + parseInt(btn)只是计算了值，但没有把结果赋值回num1，等于白算。必须写成num1 = num1 * 10 + parseInt(btn);，num2同理。

核心问题5：逻辑分支顺序混乱 #

C按钮的判断应该放在最前面，不然会被其他分支跳过；数字输入的逻辑要区分“还没选运算符”和“已经选了运算符”两种情况。

完整修正后的代码 #

JavaScript部分

let num1 = null;
let num2 = null;
let operator = null;
let result = null;
const calcBtn = document.querySelectorAll('.btn');
const outputNum = document.getElementById('outputNum');

// 显示当前输入内容
const displayValue = () => {
  if (num1 !== null && operator !== null) {
    outputNum.textContent = `${num1} ${operator} ${num2 || ''}`;
  } else if (num1 !== null) {
    outputNum.textContent = num1;
  }
}

// 计算逻辑
const calcul = (num1, num2, operator) => {
  let result;
  operator = operator === 'x' ? '*' : operator;
  switch (operator) {
    case '+':
      result = num1 + num2;
      break;
    case '-':
      result = num1 - num2;
      break;
    case '*':
      result = num1 * num2;
      break;
    case '/':
      result = num1 / num2;
      break;
    case '%':
      result = num1 % num2;
      break;
    default:
      result = num1;
  }
  return result;
}

// 按钮点击处理
const calculBtn = (e) => {
  const btn = e.target.textContent;

  // 先处理清除按钮
  if (btn === 'C') {
    num1 = null;
    num2 = null;
    operator = null;
    result = null;
    outputNum.textContent = '';
    return;
  }

  // 处理等号
  if (btn === '=') {
    if (num1 !== null && num2 !== null && operator !== null) {
      result = calcul(num1, num2, operator);
      outputNum.textContent = result;
      num1 = result;
      num2 = null;
      operator = null;
    }
    return;
  }

  // 处理运算符
  if (['+', '-', 'x', '/', '%'].includes(btn)) {
    if (num1 !== null) {
      operator = btn;
      displayValue();
    }
    return;
  }

  // 处理数字输入
  if (btn >= '0' && btn <= '9') {
    const num = parseInt(btn);
    if (operator === null) {
      // 还没选运算符，输入第一个数
      num1 = num1 === null ? num : num1 * 10 + num;
    } else {
      // 已经选了运算符，输入第二个数
      num2 = num2 === null ? num : num2 * 10 + num;
    }
    displayValue();
  }
}

// 绑定点击事件
calcBtn.forEach(btn => {
  btn.addEventListener('click', calculBtn);
});

HTML部分（无需修改，JS已适配乘号x）

<div class="calculator">
  <div class="display">
    <div class="output">
      <p id="outputNum"></p>
    </div>
  </div>

  <div class="first-row">
    <div class="btn clear">C</div>
    <div class="btn operator">%</div>
    <div class="btn operator">/</div>
    <div class="btn operator">x</div>
  </div>

  <div class="second-row">
    <div class="btn">7</div>
    <div class="btn">8</div>
    <div class="btn">9</div>
    <div class="btn operator">-</div>
  </div>

  <div class="third-row">
    <div class="btn">4</div>
    <div class="btn">5</div>
    <div class="btn">6</div>
    <div class="btn operator">+</div>
  </div>

  <div class="fourth-row">
    <div class="btn">1</div>
    <div class="btn">2</div>
    <div class="btn">3</div>
    <div class="btn result">=</div>
  </div>

  <div class="fifth-row">
    <div class="btn">0</div>
  </div>
</div>

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