JS待办清单项目运行报Cannot read properties of null (reading 'appendChild')错误

Cannot read properties of null (reading 'appendChild') 报错的核心是你调用appendChild方法的toDoContianer变量值为null，也就是代码没有成功获取到对应的DOM元素，通常有两个常见诱因：

• JS执行时机早于DOM渲染：如果你的JS代码放在<head>标签内，或者放在对应HTML元素的上方，浏览器执行JS时还没有渲染出目标元素，document.getElementById就会返回null
• ID不匹配：代码里写的元素ID和HTML里实际定义的ID拼写、大小写不一致，包括你代码里的容器IDtoDoContianer大概率是拼写错误（正确拼写为toDoContainer，i和a的顺序写反了）

1. 调整JS执行时机
   把所有代码包裹在DOM加载完成的监听回调中，或者直接把JS代码放到</body>结束标签的前面，确保DOM渲染完成后再执行JS逻辑：

// 包裹方式示例
document.addEventListener('DOMContentLoaded', function() {
  // 你的原有代码放在这里
})

2. 核对所有元素ID
   检查HTML里的三个元素ID必须和代码完全对应：

• 新增待办按钮ID为 addToDo
• 待办列表容器ID为 toDoContianer（如果是代码拼写错误，把代码里的ID修改为和HTML一致的正确拼写即可）
• 输入框ID为 inputField

3. 修复额外的隐性错误
   你代码里的双击事件名写为dblClick，正确的标准事件名是全小写的dblclick，修改后双击删除功能才能正常生效。

document.addEventListener('DOMContentLoaded', function() {
  let addToDoButton = document.getElementById('addToDo');
  // 注意这里如果HTML里的ID是正确的toDoContainer，要把变量名和getElementById的参数一起改对
  let toDoContianer = document.getElementById('toDoContianer');
  let inputField = document.getElementById('inputField');

  addToDoButton.addEventListener('click', function() {
    var paragraph = document.createElement('p');
    paragraph.classList.add('paragraph-styling');
    paragraph.innerText = inputField.value;
    toDoContianer.appendChild(paragraph);
    
    inputField.value = "";

    paragraph.addEventListener('click', function() {
      paragraph.style.textDecoration = 'line-through';
    });

    // 事件名改为全小写的dblclick
    paragraph.addEventListener('dblclick', function() {
      toDoContianer.removeChild(paragraph);
    });
  });
})

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