求助：Uncaught TypeError报错——无法读取undefined的addEventListener属性

别担心，刚接触JavaScript遇到这种小问题太正常啦！我来帮你快速捋清楚问题所在：

你遇到的Uncaught TypeError: Cannot read property 'addEventListener' of undefined错误，核心原因是代码里的**document.btn是错误写法**。

你已经通过const btn = document.querySelector('.btn')获取到了类名为btn的按钮元素，直接使用变量btn就可以了，document.btn并不是DOM API的有效用法，这会导致它的值为undefined，自然没法调用addEventListener方法。

修正后的完整代码 #

const btn = document.querySelector('.btn'); 
const list = document.querySelector('.list'); 

// 直接使用获取到的btn变量
btn.addEventListener('click', onClick); 

function onClick(e){ 
  console.log('clicked'); 
  const li = document.createElement('li'); 
  li.appendChild(document.createTextNode('New item')); 
  list.appendChild(li); 
  e.preventDefault(); 
}

额外小提示 #

另外还要注意：如果你的JS代码放在HTML头部，可能会出现DOM还没加载完成就执行代码的情况，导致document.querySelector获取不到元素。这种情况下可以把script标签放到<body>标签的末尾，或者用DOMContentLoaded事件包裹代码，确保DOM加载完成后再执行：

document.addEventListener('DOMContentLoaded', function() {
  const btn = document.querySelector('.btn'); 
  const list = document.querySelector('.list'); 

  btn.addEventListener('click', onClick); 

  function onClick(e){ 
    console.log('clicked'); 
    const li = document.createElement('li'); 
    li.appendChild(document.createTextNode('New item')); 
    list.appendChild(li); 
    e.preventDefault(); 
  }
});

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