使用querySelectorAll.forEach时为何出现'Cannot read properties of null'错误？

需求：通过querySelectorAll结合forEach循环，为所有.likeButton类的按钮添加事件监听器，实现点赞切换功能——点击时按钮内部的.likeCount标签数字加1或减1，同时切换按钮样式。

当前代码运行时出现以下错误：

scr.js:5 Uncaught TypeError: Cannot read properties of null (reading 'innerHTML')
    at scr.js:5:84
    at NodeList.forEach (<anonymous>)
    at scr.js:3:12

且曾出现仅第一个按钮响应、数字变为[objectUndefined]的异常，将NodeList转为数组后功能完全失效。

错误原因分析 #

• 选择器使用错误：代码中用#likeCount:nth-of-type(${index+1})查找计数元素，但HTML里的计数span是类名.likeCount而非id，导致querySelector返回null，读取innerHTML时触发报错。
• 计数逻辑混乱：同时维护独立count变量、解析按钮innerHTML，还错误调用全局toString()方法（正确用法应为count.toString()，而非toString(parseInt(...))），导致数字显示异常。
• 依赖索引关联元素：通过index绑定按钮和计数元素，若DOM结构变化（比如新增/删除按钮），会导致索引错位，且不如直接从按钮内部查找子元素可靠。
• 冗余的数组转换：querySelectorAll返回的NodeList本身支持forEach方法，无需额外用Array.from转换，转换后不影响功能，但属于冗余操作。

修复后的代码 #

HTML（无需修改） #

<div class="wrap">
  <button class="likeButton">
  <span class="likeCount">69</span></button>
</div>
<div class="wrap">
  <button class="likeButton">
  <span class="likeCount">420</span></button>
</div>

CSS（无需修改） #

* {
  border: 0;
  outline: 0;
  box-sizing: border-box;
}
.likeButton {
  background: black;
  color: white;
}
.likeButton.active {
  border: 1px dashed blue;
  background: white;
  color: black;
}

JavaScript（优化修复） #

// 直接遍历按钮NodeList，无需转数组
document.querySelectorAll('.likeButton').forEach(button => {
  // 从当前按钮内部查找计数元素，避免全局选择器和索引依赖
  const countElement = button.querySelector('.likeCount');
  // 初始化当前计数
  let count = parseInt(countElement.textContent);
  // 用按钮的dataset存储点赞状态，避免闭包变量问题
  button.dataset.liked = 'false';

  button.addEventListener('click', () => {
    const isLiked = button.dataset.liked === 'true';
    if (isLiked) {
      count--;
      button.dataset.liked = 'false';
    } else {
      count++;
      button.dataset.liked = 'true';
    }
    // 更新计数显示
    countElement.textContent = count;
    // 切换激活样式
    button.classList.toggle('active');
  });
});

代码优化说明 #

1. 元素查找优化：通过button.querySelector('.likeCount')直接从当前按钮内部获取计数元素，避免全局查找和索引关联，更鲁棒。
2. 状态管理优化：用按钮的dataset存储点赞状态，替代闭包中的counter变量，避免多个按钮共享闭包变量的潜在问题。
3. 计数逻辑简化：直接维护count变量，更新后同步到countElement.textContent，避免解析按钮innerHTML的冗余操作。
4. 去除冗余转换：直接使用NodeList的forEach方法，无需转数组，代码更简洁。

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