计算器窗口无法填充数字问题求助

你的代码里有几个关键问题导致数字无法正常显示：

1. 元素内容赋值错误 #

如果.window-content是普通HTML元素（比如<div>或<span>），它没有value属性——这个属性仅属于表单输入类元素（如<input>、<textarea>）。你需要用textContent或innerText来设置这类元素的显示内容。

2. 未定义变量引发报错 #

• 最后else分支里误用了未声明的windowContent变量，正确的应该是你之前定义的screen。
• firstNum、secondNum、operator这三个运算相关变量没有提前声明，点击等于号时会触发错误，必须在代码开头定义它们。

修复后的完整代码 #

const screen = document.querySelector(".window-content");
let windowValue = "";
// 提前声明运算所需变量
let firstNum = "";
let secondNum = "";
let operator = "";

document.querySelector(".container").addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.tagName !== "BUTTON") return; // 标签名大写匹配更严谨

  let buttonText = tgt.innerText; 
  if (buttonText === 'X') { 
    buttonText = '*';
    windowValue += buttonText;
    screen.textContent = windowValue; // 改用textContent设置内容
  } else if (buttonText === 'CA') { 
    windowValue = "";
    screen.textContent = windowValue;
  } else if (buttonText === '🡄') { 
    windowValue = windowValue.slice(0,-1);
    screen.textContent = windowValue;
  } else if (buttonText === '=') { 
    // 加入异常处理避免运算出错导致页面崩溃
    try {
      screen.textContent = operate(firstNum, secondNum, operator);
      windowValue = screen.textContent;
    } catch (err) {
      screen.textContent = "Error";
      windowValue = "";
    }
    firstNum = "";
    operator = "";
    secondNum = "";
  } else if (buttonText.match(/[0-9]/)) { 
    windowValue += buttonText; 
    screen.textContent = windowValue;
  } else { 
    firstNum = windowValue;
    operator = buttonText;
    windowValue = "";
    // 修复变量名错误，统一用screen操作显示内容
    screen.textContent = operator;
  }
});

// 示例运算函数，可根据需求完善逻辑
function operate(num1, num2, op) {
  const n1 = parseFloat(num1);
  const n2 = parseFloat(num2);
  if (isNaN(n1) || isNaN(n2)) return "Error";
  
  switch(op) {
    case '+': return n1 + n2;
    case '-': return n1 - n2;
    case '*': return n1 * n2;
    case '/': return n2 !== 0 ? n1 / n2 : "Error";
    default: return "Error";
  }
}

额外提示 #

• 事件委托中tagName返回的是大写字符串，判断!== "BUTTON"能避免HTML标签小写导致的匹配失败。
• 加入try/catch可以处理运算异常（比如除以0、未输入完整表达式），提升计算器的稳定性。

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