使用CSS Grid和JavaScript实现计算器数字输入功能遇阻求助

你遇到的问题核心是JavaScript代码执行时机不对，导致元素还没加载就尝试绑定事件，最终监听失效。另外你之前的写法会直接覆盖输入框内容，不符合计算器追加数字的需求，同时每个按钮单独绑定监听也不够高效。

解决方案 #

• 确保JS在DOM完全加载后执行，可通过将脚本放在<body>末尾，或使用DOMContentLoaded事件包裹代码。
• 使用事件委托，给父元素main绑定一次监听，处理所有数字按钮的点击，减少重复代码。
• 实现数字追加逻辑，点击数字时在输入框现有内容后添加对应数字；实现清零功能，点击CLEAR清空输入框。

完整修正代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>简易计算器</title>
  <style>
    main {
      display: grid;
      grid-template-columns: 60px 60px 60px;
      grid-template-rows: 60px 60px 60px 60px;
      gap: 2px;
      margin-top: 10px;
    }
    #clear {
      grid-column: 2/4;
      grid-row: 4/5;
      border: 1px solid blue;
    }
    div {
      border: 1px solid blue;
      text-align: center;
      font-size: 24px;
      background-color: lightgreen;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    #input {
      width: 184px;
      padding: 8px;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <form name="form1">
    <input id="input" name="input" type="text" readonly>
  </form>
  <main>
    <div class="num-btn">1</div>
    <div class="num-btn">2</div>
    <div class="num-btn">3</div>
    <div class="num-btn">4</div>
    <div class="num-btn">5</div>
    <div class="num-btn">6</div>
    <div class="num-btn">7</div>
    <div class="num-btn">8</div>
    <div class="num-btn">9</div>
    <div class="num-btn">0</div>
    <div id="clear">CLEAR</div>
  </main>

  <script>
    // 等待DOM加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
      const input = document.getElementById('input');
      const main = document.querySelector('main');

      // 事件委托处理所有按钮点击
      main.addEventListener('click', function(e) {
        const target = e.target;
        // 处理数字按钮
        if (target.classList.contains('num-btn')) {
          input.value += target.textContent;
        }
        // 处理清零按钮
        if (target.id === 'clear') {
          input.value = '';
        }
      });
    });
  </script>
</body>
</html>

关键改进说明 #

• 给数字按钮统一添加num-btn类，方便批量识别。
• 用DOMContentLoaded确保DOM加载完成后再绑定事件，彻底解决元素找不到的问题。
• 事件委托：仅给main绑定一次点击事件，通过判断点击目标的类/ID执行对应逻辑，代码更简洁，新增按钮无需额外绑定监听。
• 输入框设为readonly，避免用户手动输入，符合计算器交互逻辑。
• 数字追加逻辑：input.value += target.textContent实现点击数字后在现有内容后追加，而非直接覆盖。

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