Uncaught TypeError: Cannot set property 'onclick' of null解决办法

如果把js内容直接放在这个head标签以内，button按钮不能正常点击更换body的背景颜色，报错提示：demo6.html:16 Uncaught TypeError: Cannot set property 'onclick' of null，分析解决办法如下：

 1 <!DOCTYPE html>
 2 <html lang="en" 3 head 4     Meta charset="UTF-8" 5     name="viewport" content="width=device-width,initial-scale=1.0" 6     title>点击背景变色js事件问题</ 7     style type="text/css" 8         button{
 9             cursor: pointer;
10         }
11     style12     script13     // 问题描述,如果直接把这下面段代码放在页面这里，控制台提示Uncaught TypeError: Cannot set property 'onclick' of null
14 
15     obj=document.getElementById('dj);
16     obj.onclickfunction(){
17         document.body.style.background#f90;
18     }
19 
20      解决办法二:
21          window.onload = function () {
22              var Btn = document.getElementById('dj');
23              Btn.onclick = function () {
24                  console.log("push the button ");
25                  document.body.style.background='#f90';
26              }
27          }
28     29 body30     button id="dj">点击button31 32 <!-- <script type="text/javasript"> -->
33      相关问题：<script></script> vs/or <script type=”text/javasript”></script>
34     如果用H5就不需要加，因为H5默认属性就是text/javascript，
35 而 HTML 4.01 and XHTML 1.0 规范 type 属性是需要的，如果用H5<script></script>是可以且比较好的选择。最重要一点是加了不起作用也不报错 36 
37  解决办法一： 38  <script>
39     obj=document.getElementById('dj');
40     obj.onclick=function(){
41         console.log('测试');
42         alert('Surprise')
43         document.body.style.background='#f90';
44 45 </script> 46 html>

问题归纳总结：第一种解决办法直接js文件放在页面底部加载，第二种window onload()包裹起来，出现问题原因：W3School中介绍浏览器先加载完按钮节点才执行JS，当浏览器自顶向下解析时，找不到onclick绑定的按钮节点了,网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能导致无法获取对象的情况,。window.onload是一个事件，window.onload表示页面加载完成后执行的函数，js按照页面自上而下的顺序说明的，页面上的Javascript代码是HTML文档的一部分，所以Javascript在页面装载时执行的顺序就是其引入标记!

参考网址：oito 王大锤子呦 lily2016n

补充(2020-10-27)针对评论中说文件解决方法不起作用，可以下载文件进行查看https://files-cdn.cnblogs.com/files/webaction/1027demo.zip

Uncaught TypeError: Cannot set property 'onclick' of null解决办法

相关推荐