使用HTML、CSS和JavaScript开发的计算器无法运行求助

结合你的代码场景，核心问题集中在JavaScript逻辑上，以下是具体排查点和修复方案：

• 事件绑定逻辑漏洞：如果是通过getElementsByTagName('button')循环绑定点击事件，循环内直接赋值onclick会因闭包特性导致所有按钮触发同一逻辑。建议改用querySelectorAll配合forEach绑定事件，避免闭包陷阱。
• 输入框类型不匹配：若HTML输入框设为type="number"，运算符（+、-、*、/）会被自动过滤，导致JS无法获取完整表达式。需将输入框类型改为type="text"。
• 表达式拼接错误：点击运算符时未校验输入框末尾字符，易出现连续运算符（如1++2），传给执行函数会直接报错。需添加判断逻辑，避免重复追加运算符。
• 表达式执行的稳定性问题：直接用eval()执行用户输入存在安全风险，且表达式格式错误时会直接崩溃。建议用new Function()替代，同时添加异常捕获处理格式错误。
• DOM元素获取失败：需确认JS中获取输入框的id与HTML中输入框的id完全一致，否则会出现display为null，调用display.value时触发报错。

修正后的核心JS示例 #

// 获取输入框与所有按钮
const display = document.getElementById('screen');
const buttons = document.querySelectorAll('button');

buttons.forEach(button => {
  button.addEventListener('click', () => {
    const btnValue = button.textContent;
    if (btnValue === '=') {
      // 校验表达式末尾是否为运算符
      const lastChar = display.value.slice(-1);
      if (/[+\-*/]/.test(lastChar)) {
        display.value = '格式错误';
        setTimeout(() => display.value = '', 1000);
        return;
      }
      try {
        // 用Function替代eval提升安全性
        display.value = new Function(`return ${display.value}`)();
      } catch (err) {
        display.value = '计算错误';
        setTimeout(() => display.value = '', 1000);
      }
    } else if (btnValue === 'C') {
      display.value = '';
    } else {
      // 避免连续添加运算符
      const lastChar = display.value.slice(-1);
      if (/[+\-*/]/.test(btnValue) && /[+\-*/]/.test(lastChar)) {
        return;
      }
      display.value += btnValue;
    }
  });
});

同时需检查HTML结构：确保所有按钮已正确渲染在DOM中，输入框的id与JS代码中的取值一致，按钮文本（如清除按钮为C、等于按钮为=）与逻辑判断的内容匹配。

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