使用querySelector添加点击事件失效，控制台报'Null is not an object'

嘿，我来帮你拆解这个问题～你遇到的Null is not an object错误，核心问题大概率是你的JavaScript代码执行得太早了——在浏览器还没把目标DOM元素解析渲染出来的时候，你就尝试去获取元素并绑定事件，自然会得到null。

为什么querySelector找不到元素？ #

你写的选择器.section.active .button本身是没问题的，HTML里确实存在带active类的section和里面的button。但如果你的JS脚本放在了<head>标签里，或者放在HTML结构的上方，浏览器会先执行JS，这时候那些section、button元素还没被创建出来，document.querySelector自然找不到任何元素，返回null，调用addEventListener就会报错。

你的第二个代码还有个小bug #

你这段代码里变量名写错了：

var hiddenContent = document.querySelectorAll('.button'); 
for (var i = 0; i < button.length; i++) { 
  button[i].addEventListener('click', function(){ 
    document.querySelector('.section.active .hidden-content').classList.add('show') 
  }); 
}

你用querySelectorAll获取的元素存在hiddenContent变量里，但循环里却用了未定义的button，会导致button is not defined的错误，得把button改成hiddenContent，或者直接把变量名改成buttons更直观：

var buttons = document.querySelectorAll('.button'); 
for (var i = 0; i < buttons.length; i++) { 
  buttons[i].addEventListener('click', function(){ 
    document.querySelector('.section.active .hidden-content').classList.add('show') 
  }); 
}

修复方案 #

这里给你两种可靠的解决方法：

• 方法1：把JS脚本放在HTML末尾
  把你的<script>标签放在</body>标签的紧前面，这样浏览器会先解析完所有DOM元素，再执行JS代码：

  <!-- 所有HTML内容 -->
  <script>
    document.querySelector('.section.active .button').addEventListener('click', function(){ 
      document.querySelector('.section.active .hidden-content').classList.add('show') 
    });
  </script>
  </body>
  

• 方法2：用DOMContentLoaded事件包裹代码
  如果你不想移动脚本位置，可以监听DOMContentLoaded事件，确保DOM加载完成后再执行代码：

  document.addEventListener('DOMContentLoaded', function() {
    // 你的代码放在这里
    document.querySelector('.section.active .button').addEventListener('click', function(){ 
      document.querySelector('.section.active .hidden-content').classList.add('show') 
    });
  });
  

补充：你的思路是对的 #

你说“同一时间只会存在一个.section.active .button”，这个逻辑没问题，querySelector确实会返回第一个匹配到的元素，只要元素存在且代码执行时机正确，这个选择器是能正常工作的～

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