如果把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. Python 判断小数的函数

    需求分析:1.小数点个数可以使用.count()方法2.按照小数点进行分割 例如: 1.98 [1,98]3.正小数:小数点左边是整数,右边也是整数 可以使用.isdigits()方法4.负小数:小数 ...

  2. 2020.2，《The day after tomorrow》

    “The day after tomorrow, where will you be?” 2020春节冠状病毒肆虐被迫禁足家里,无意间打开了2004年由德国罗兰·艾默里奇(Roland Emmeric ...

  3. 安装pycharm后设置idle为默认打开方式（idle.bat）图标“变异”为未知bug

    这个虽不影响使用,但是对着一个白色的框框,这体验真的是不符合强迫症的风格啊~~~注册表,重装,......解决方案多多种,但是经过大神推荐,有一个很好用的小工具, 下载地址:Default Progr ...

  4. 数据结构与算法 --- js描述栈

    js描述栈及栈的使用 栈的特性就是只能通过一端访问,这一段就是叫做栈顶.咖啡馆内的一摞盘子就是最形象的栈的例子: 根据栈的特性,就可以定义栈的一些特殊属性和方法;用js的描述栈的时候底层数据结构用的是 ...

  5. docker swoft

    docker swoft 安装并运行docker docker run -d -p 80:80 --name swoft swoft/swoft docker ps 查看正在运行的容器 docker ...

  6. 吉哥系列故事——恨7不成妻（数位dp)

    吉哥系列故事--恨7不成妻 传送门 Problem Description 单身! 依然单身! 吉哥依然单身! DS级码农吉哥依然单身! 所以,他生平最恨情人节,不管是214还是77,他都讨厌! 吉哥 ...

  7. 这个菜鸟花几个小时写的 DEMO 被码云推荐上首页 ？

    写在最前     没有接触过 AntV 的诸位看客可通过这篇不成文的文章稍作了解.最近 病毒猖獗,遂抽空做了一个相关小 DEMO.数据可视化方面的使用的是 AntV F2,前端框架使用 Vue 快速成 ...

  8. python sqlalchemy mysql 自动映射

    SQLAlchemy是Python编程语言下的一款ORM框架,该框架建立在数据库API之上,使用关系对象映射进行数据库操作 简言之便是:将对象转换成SQL,然后使用数据API执行SQL并获取执行结果 ...

  9. Centos 7x 安装 Telegram MTproxy代理【完美可用】

    0x00 最近迷上了Telegram,也就是电报,觉得通过这个获取国外的新闻比较方便 可是我的VPS小机子不给力,一开始使用的Centos 6x,死活装不上去, 发现MTproxy不支持Centos ...

  10. webdriver的常用方法

    webdriver的常用方法 click():点击元素 clear():清除文本 send_keys(value):模拟按键输入 # -*- coding:utf-8 -*- from seleniu ...