JavaScript事件监听报错Cannot read property 'addEventListener' of null求助

嘿，这个报错我太熟悉了！本质原因很简单：当你的JavaScript代码执行时，页面上id为button的按钮元素还没有被浏览器加载出来，所以document.getElementById("button")返回了null，自然就没法调用addEventListener方法啦。

下面给你几个靠谱的解决方案：

• 把脚本放到页面最底部
  浏览器是从上到下加载HTML的，把你的<script>标签放在</body>标签的前面，这样所有DOM元素都加载完成后，再执行JS代码，就能确保找到目标元素了。示例结构：

  <!-- 页面其他内容 -->
  <button id="button">获取比特币价格</button>
  <div id="price"></div>
  
  <script>
    var btn = document.getElementById("button");
    var priceshow = document.querySelector("#price");
    btn.addEventListener("click", function(){
      // 你的请求代码...
    });
  </script>
  </body>
  

• 用DOMContentLoaded事件包裹代码
  如果不想调整脚本位置，就监听页面DOM加载完成的事件，确保代码在元素存在后再执行。修改后的代码如下：

  document.addEventListener('DOMContentLoaded', function() {
    var btn = document.getElementById("button");
    var priceshow = document.querySelector("#price");
    
    btn.addEventListener("click", function(){
      var XHR = new XMLHttpRequest();
      XHR.onreadystatechange = function() {
        if (XHR.readyState == 4 && XHR.status == 200) {
          var data = JSON.parse(XHR.responseText);
          var price = data.bpi.GBP.rate;
          priceshow.innerText = price;
        }
      }
      var url = "https://api.coindesk.com/v1/bpi/currentprice.json";
      XHR.open("GET", url);
      XHR.send();
    });
  });
  

• 检查元素ID是否正确
  最后别忘了确认HTML里的按钮id确实是button，ID是区分大小写的，比如写成Button或者btn都会导致找不到元素哦！

另外提个小建议：现在更推荐使用fetch API来发送网络请求，写法会更简洁易读，不过先解决当前的DOM加载问题才是重点～

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