如果把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. 创建自定义的RouteBase实现(Creating a Custom RouteBase Implementation) |定制路由系统 |

  2. 英语学习app——Alpha发布1

    英语学习app--Alpha发布1 这个作业属这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/GeographicInformationScience/ ...

  3. 小白学Java：内部类

    目录 小白学Java:内部类 内部类的分类 成员内部类 局部内部类 静态内部类 匿名内部类 内部类的继承 内部类有啥用 小白学Java:内部类 内部类是封装的一种形式,是定义在类或接口中的类. 内部类 ...

  4. 创建dynamics CRM client-side (四) - Namespace Notation in JS

    我们在开发的时候会写很多functions. 但是这些functions 管理起来很麻烦. 微软内部建议我们使用namespace notation的形式管理我们的代码 // Converting f ...

  5. java线程基础梳理

    java线程 概述 进程:运行时概念,运行的应用程序,进程间不能共享内存 线程:应用程序内并发执行的代码段,可以共享堆内存和方法区内存,而栈内存是独立的. 并发理解:在单核机器上,从微观角度来看,一段 ...

  6. linux---> siege压力测试工具使用

    siege压力测试工具使用 安装 下载地址 : http://download.joedog.org/siege/ CaodeMacBook-Pro:local root# tar -xzvf sie ...

  7. Shell常用命令之echo

    echo 字符串的输出 选项 -n:不换行输出 -e:启用反斜杠转义符 -E:禁用反斜杠转义符 反斜杠转义符 \a:发出警告声 \b:删除前一个字符 \c:最后不加上换行符号 \f:换行但光标仍然停留 ...

  8. Informatica9.5.1创建资源库出错找不到libpmora8.so

    错误信息: Database driver event...Error occurred loading library [libclntsh.so.10.1: cannot open shared ...

  9. hadoop-2.10.0安装hive-2.3.6

    公司建立数仓,hive是必不可少的,hive是建立在hadoop基础上的数据库,前面已经搭建起了hadoop高可用,要学习hive,先从搭建开始,下面梳理一下hive搭建过程 1.下载hive安装包 ...

  10. CSS 故障艺术

    本文的主题是 Glitch Art,故障艺术. 什么是故障艺术?我们熟知的抖音的 LOGO 正是故障艺术其中一种表现形式.它有一种魔幻的感觉,看起来具有闪烁.震动的效果,很吸引人眼球. 故障艺术它模拟 ...