JavaScript实现复选框选中触发品牌筛选及addEventListener报错修复

Cannot read properties of null (reading 'addEventListener') 触发原因只有两个：

1. JS执行事件绑定的时机早于DOM渲染，代码查询目标复选框元素时，节点还没被解析到页面里，返回值为null
2. 元素选择器拼写错误，没有匹配到任何DOM节点，拿到的结果是null
   直接对null调用addEventListener方法就会抛出这个错误。

基础修复逻辑 #

• 调整JS执行时机：要么把script标签放到HTML文件末尾</body>标签之前，要么把所有DOM操作逻辑包裹在DOMContentLoaded事件回调中，确保DOM树解析完成后再查询元素
• 增加空值判断：拿到查询到的DOM节点后，先判断节点是否存在，再执行事件绑定，避免空值调用方法
• 校验选择器：核对选择器的类名、ID、属性名和HTML中元素的实际属性完全一致，避免拼写错误
• 多复选框场景不要用querySelector获取元素：该方法只会返回第一个匹配的节点，批量获取复选框要使用querySelectorAll

可直接复用的代码示例 #

HTML结构参考 #

<!-- 品牌筛选区 -->
<div class="brand-filter">
  <label><input type="checkbox" class="brand-checkbox" value="apple"> 苹果</label>
  <label><input type="checkbox" class="brand-checkbox" value="huawei"> 华为</label>
  <label><input type="checkbox" class="brand-checkbox" value="xiaomi"> 小米</label>
</div>
<!-- 商品展示区 -->
<div class="goods-list"></div>

JS逻辑（静态元素场景） #

如果复选框是页面首次加载就直接渲染的静态内容，用下面的写法：

document.addEventListener('DOMContentLoaded', () => {
  // 获取DOM节点
  const brandCheckboxes = document.querySelectorAll('.brand-checkbox');
  const goodsContainer = document.querySelector('.goods-list');

  // 空值判断，节点不存在直接终止逻辑，避免报错
  if (!brandCheckboxes.length || !goodsContainer) return;

  // 遍历给每个复选框绑定change事件
  brandCheckboxes.forEach(checkbox => {
    checkbox.addEventListener('change', renderBrandGoods);
  });

  // 选中品牌对应商品加载逻辑
  function renderBrandGoods() {
    // 收集所有选中的品牌值
    const checkedBrands = Array.from(brandCheckboxes)
      .filter(item => item.checked)
      .map(item => item.value);
    
    console.log('当前选中品牌列表：', checkedBrands);
    // 此处替换为实际的接口请求、商品渲染逻辑
    goodsContainer.innerHTML = `已选中品牌：${checkedBrands.join('、') || '无'}，对应商品加载完成`;
  }

  // 初始化执行一次，加载默认状态下的商品
  renderBrandGoods();
})

JS逻辑（动态渲染复选框场景） #

如果品牌复选框是后续通过接口动态渲染到页面的，用事件委托写法，不需要等复选框渲染完成再绑定事件：

document.addEventListener('DOMContentLoaded', () => {
  const filterContainer = document.querySelector('.brand-filter');
  const goodsContainer = document.querySelector('.goods-list');
  if (!filterContainer || !goodsContainer) return;

  // 把事件绑定在已经存在的父容器上
  filterContainer.addEventListener('change', (e) => {
    // 只响应复选框的触发
    if (!e.target.classList.contains('brand-checkbox')) return;

    const checkedBrands = Array.from(document.querySelectorAll('.brand-checkbox:checked'))
      .map(item => item.value);
    
    console.log('当前选中品牌列表：', checkedBrands);
    // 执行商品加载、渲染逻辑
  })
})

• 不要把DOM操作相关的JS直接放在<head>标签里且不加加载监听，这时候页面body内的元素还未解析，所有DOM查询结果都会是null
• 动态生成的元素不要直接绑定事件，否则每次渲染完元素都要重新做一次事件绑定，冗余且容易漏绑，事件委托是更稳妥的方案
• 空值判断不要漏，如果页面某个版本临时下线了品牌筛选模块，加了判断的代码不会抛出阻断性错误，不会影响其他模块正常运行

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