实现加减计数器时遇Uncaught TypeError错误求助

错误原因分析 #

1. DOM元素未加载就执行脚本
   你的脚本放在<head>标签里，浏览器会优先解析执行这里的代码，但此时<body>里的按钮和p元素还没被渲染到DOM中，document.getElementById('minus')和document.getElementById('plus')会返回null，自然无法设置onclick属性，导致控制台报错。

2. 获取元素方式错误导致功能失效
   document.getElementsByClassName()返回的是一个HTMLCollection集合，不是单个DOM元素，直接给它设置innerHTML不会生效，必须通过索引（比如[0]）获取集合里的第一个元素再操作。

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <title>Counter</title>
  <style>
    p{
      font-size: 2rem;
    }
    button{
      font-size: 2rem;
    }
  </style>
</head>
<body>
  <p class="number">0</p>
  <button id="minus">-</button>
  <button id="plus">+</button>

  <!-- 将脚本移到body末尾，确保DOM元素已加载 -->
  <script>
    let integer = 0;
    // 获取单个元素，避免集合操作错误
    const numberEl = document.querySelector('.number');

    document.getElementById('minus').onclick = function(){
      integer -= 1;
      numberEl.innerHTML = integer;
    };

    document.getElementById('plus').onclick = function(){
      integer += 1;
      numberEl.innerHTML = integer;
    };
  </script>
</body>
</html>

关键修改点说明 #

• 把<script>标签移到<body>的最末尾，确保所有DOM元素都已被浏览器解析后再执行脚本，避免获取到null。
• 用document.querySelector('.number')直接获取单个p元素（比getElementsByClassName更简洁，返回单个元素而非集合），后续直接操作这个元素的innerHTML。

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