DOM点击事件修改页面背景色失效求助：控制台正常页面无响应

不用考虑鼠标点击坐标，核心问题大概率是代码执行时机不对：

• 你在浏览器控制台测试时，页面DOM已经完全加载完成，所以能正常选中body元素并绑定事件；但如果把代码直接放在页面头部（比如<head>里），浏览器还没解析到<body>标签时，代码就已经执行了，这时候document.querySelector('body')会返回null，自然没法给body绑定点击事件，功能也就失效了。

给你三种可行的解决办法：

1. 把JS代码放到页面最后（</body>标签前）
   这样浏览器会先加载完所有DOM元素，再执行JS代码：

   <body>
     <!-- 你的页面内容 -->
     <script>
       let bodyvar = document.querySelector('body');
       bodyvar.addEventListener("click", generate);
       function generate(){
           bodyvar.style.backgroundColor = "red";
       }
     </script>
   </body>
   

2. 监听DOMContentLoaded事件
   让代码等DOM完全加载完成后再执行：

   document.addEventListener('DOMContentLoaded', function() {
       let bodyvar = document.querySelector('body');
       bodyvar.addEventListener("click", generate);
       function generate(){
           bodyvar.style.backgroundColor = "red";
       }
   });
   

3. 给script标签加defer属性
   带defer的脚本会在DOM加载完成后执行，同时不会阻塞页面渲染：

   <script defer>
     let bodyvar = document.querySelector('body');
     bodyvar.addEventListener("click", generate);
     function generate(){
         bodyvar.style.backgroundColor = "red";
     }
   </script>
   

你可以先验证一下：在原代码里加一行console.log(bodyvar)，如果页面加载后控制台输出null，就百分百是DOM未加载导致的问题，用上面的方法就能解决。

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