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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>点击背景变色js事件问题</title>

     <style type="text/css">

         button{

             cursor: pointer;

         }

     </style>

     <script>

     // 问题描述,如果直接把这下面段代码放在页面这里，控制台提示Uncaught TypeError: Cannot set property 'onclick' of null

     obj=document.getElementById('dj');

     obj.onclick=function(){

         document.body.style.background='#f90';

     }

     // 解决办法二:

         // window.onload = function () {

         //     var Btn = document.getElementById('dj');

         //     Btn.onclick = function () {

         //         console.log("push the button ");

         //         document.body.style.background='#f90';

         //     }

         // }

     </script>

 <body>

     <button id="dj">点击</button>

 </body>

 <!-- <script type="text/javasript"> -->

     <!-- 相关问题：<script></script> vs/or <script type=”text/javasript”></script>

     如果用H5就不需要加，因为H5默认属性就是text/javascript，

 而 HTML 4.01 and XHTML 1.0 规范 type 属性是需要的，如果用H5<script></script>是可以且比较好的选择。最重要一点是加了不起作用也不报错 -->

 <!-- 解决办法一： -->

 <!-- <script>

     obj=document.getElementById('dj');

     obj.onclick=function(){

         console.log('测试');

         alert('Surprise')

         document.body.style.background='#f90';

     }

 </script> -->

 </html>

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

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

Uncaught TypeError: Cannot set property 'onclick' of null解决办法的更多相关文章

  1. Uncaught TypeError: Cannot set property onclick' of null

    如果出现以上问题,只需要把<script src="xxx.js"></script> 移动到最后,</body>的前面;

  2. Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null

    在开发Ext 项目中如果遇到 Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null 这个错误,检查下renderT ...

  3. Uncaught TypeError: Cannot set property 'innerHTML' of null

    学习Chrome插件时,要在弹出页面中显示当前时间,结果怎样也显示不出来 看了 http://www.cnblogs.com/mfryf/p/3701801.html 这篇文章后感悟颇深 通过调试发现 ...

  4. Three.js three.js Uncaught TypeError: Cannot read property 'getExtension' of null

    在调试Three.js执行加载幕布的时候,突然爆出这个错误three.js Uncaught TypeError: Cannot read property 'getExtension' of nul ...

  5. JavaScript Uncaught TypeError: Cannot read property 'value' of null

    用 JavaScript 操作 DOM 时出现如下错误: Uncaught TypeError: Cannot set property 'value' of null Uncaught TypeEr ...

  6. 前台报错:Uncaught TypeError: Cannot read property '0' of null

    错误现象: var div1=mycss[0].style.backgroundColor;  //这一行提示360和chrome提示:Uncaught TypeError: Cannot read  ...

  7. 解决sweetalert 无故报错 elem.className.replace Uncaught TypeError: Cannot read property 'className' of null

    今天碰到这么一个问题,在使用sweetalert的时候时有时无会报错 elem.className.replace Uncaught TypeError: Cannot read property ' ...

  8. vue报错 Uncaught TypeError: Cannot read property ‘children ’ of null

    Uncaught TypeError: Cannot read property ‘children ’ of null ratings未渲染完毕,就跳走goods了,取消默认跳转,即可

  9. Uncaught TypeError: Cannot read property 'ownerDocument' of null

    /********************************************************************* * Uncaught TypeError: Cannot ...

随机推荐

  1. 美食家App开发日记5

    今天将ListView控件用更强大的Recyclerview控件取代,最后调试了程序. 感觉Android编程难度实在是远远高于javaweb,初次接触,感觉有很多东西想实现,想得很容易,但是实现起来 ...

  2. 常用API_1

    API API(Application Programming Interface),应用程序编程接口.Java API是一本程序员的 字典 ,是JDK中提供给 我们使用的类的说明文档.这些类将底层的 ...

  3. 安全性与收尾工作 创建基本的安全策略 精通ASP-NET-MVC-5-弗瑞曼

  4. [转]在C#中调用C语言函数（静态调用Native DLL，Windows & Microsoft.Net平台）

    原文:https://blog.csdn.net/yapingxin/article/details/7288325 对于不太了解.Net的人,如果想要了解.Net,我必须给他介绍P/Invoke.P ...

  5. Python3实现发送邮件和发送短信验证码

    Python3实现发送邮件和发送短信验证码 Python3实现发送邮件: import smtplib from email.mime.text import MIMEText from email. ...

  6. ios---CoreLocation框架实现定位功能

    CoreLocation框架实现定位功能(iOS8.0之后) // // ViewController.m // 定位 // // Created by admin on 2017/9/20. // ...

  7. redis--->字符串和哈希对比

    redis 的字符串和哈希对比 相同点和不同点 相同点: 首先是他们有很多效果类似的命令,比如set和hset,mset和hmset等等 大多数情况下使用字符串存储的场景使用hash也可以实现. 不同 ...

  8. 【WPF学习】第二十六章 Application类——应用程序的生命周期

    在WPF中,应用程序会经历简单的生命周期.在应用程序启动后,将立即创建应用程序对象,在应用程序运行时触发各种应用程序事件,你可以选择监视其中的某些事件.最后,当释放应用程序对象时,应用程序将结束. 一 ...

  9. 【Nginx入门系列】第二章 外部无法访问Nginx服务器

    问题 Nginx服务器已经搭建成功,并且已经启动(如下图所示),并且可以ping通nginx服务器的ip地址,但是外部机子无法访问 Nginx服务器(没法显示欢迎页面) 解决方案 一般这种情况是出现在 ...

  10. 五、spring源码阅读之ClassPathXmlApplicationContext加载beanFactory

    ApplicationContext applicationContext = new ClassPathXmlApplicationContext("spring-config.xml&q ...