JavaScript报错：Cannot read properties of null (reading 'addEventListener') 求助

报错根源 #

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') 核心原因是**li变量为null**：

• 要么是代码执行时DOM还没加载完成，导致获取li元素的操作返回null；
• 要么是li元素的选择逻辑错误，根本没找到目标元素。

除此之外，代码里还有两处语法错误，即便解决null问题也无法实现预期功能：

• li.setAttribute = ("id", "completed"); 多了多余的赋值符号=，正确写法是li.setAttribute("id", "completed");
• li.removeAttribute = ("id", "completed"); 同样多了赋值符号，且removeAttribute仅需传入属性名，正确写法是li.removeAttribute("id");

修复后的完整代码 #

// 等待DOM完全加载后再执行代码，避免元素未找到的问题
document.addEventListener('DOMContentLoaded', function() {
  // 根据你的实际场景修改li的获取方式，比如通过id、类名或其他选择器
  const li = document.getElementById('target-li');
  if (!li) {
    console.error('未找到目标li元素');
    return;
  }

  const checkBox = document.createElement("input")
  checkBox.className = "form-check-input me-1 fa-pull-right"
  checkBox.type = "checkbox"
  li.appendChild(checkBox);
  checkBox.id = "checkBox";

  checkBox.addEventListener('change', function(e) {
    if (checkBox.checked) {
      li.setAttribute("id", "completed");
    } else {
      li.removeAttribute("id");
    }
  });
});

优化建议 #

不推荐用id控制样式（页面中id需唯一，多个li会冲突），建议改用class实现删除线效果：

1. 先定义CSS样式：

.completed {
  text-decoration: line-through;
}

2. 修改JavaScript中的事件逻辑：

checkBox.addEventListener('change', function(e) {
  if (checkBox.checked) {
    li.classList.add("completed");
  } else {
    li.classList.remove("completed");
  }
});

内容的提问来源于stack exchange，提问作者Kubilay Kızılhan