如果把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多层数组合成一个数组后循环打印出数组内的每一项元素的方法

    a=[1,2,3,4] b=[5,6,7,8] c=[a,b] def test(c): for i in c: return i print(test(c)) 以上代码执行后打印出来的结果是 预期目 ...

  2. Windows 系统安装 Python 3.8 详解

    安装 Python 很简单,但是其中的很多细节未必大家都清楚,趁着给自己安装最新 3.8 版本,把整个过程详细记录下. Python or Anaconda 本节是专门写给一些小白,Python 还没 ...

  3. 1.Vue初始及相关Vue核心组件

    1.Vue官方文档 官网文档:https://cn.vuejs.org/v2/guide/ 2.Vue-cli官方文档(脚手架) 官网文档:https://cli.vuejs.org/zh/guide ...

  4. qq机器人 python实现 自动回复

    我以前写的代码我现在贴在了下面,下面的连接是我自己的博客,有问题希望大家提出来,一起进步...我以前试过,没啥问题.可以实现聊天. https://realwuxiong.github.io/blog ...

  5. H5 + WebGL 展示的3D无人机

    前言 近年来,无人机的发展越发迅速,既可民用于航拍,又可军用于侦察,涉及行业广泛,也被称为“会飞的照相机”.但作为军事使用,无人机的各项性能要求更加严格.重要.本系统则是通过 Hightopo 的   ...

  6. Git详解之其他系统结合

    前言 世界不是完美的.大多数时候,将所有接触到的项目全部转向 Git 是不可能的.有时我们不得不为某个项目使用其他的版本控制系统(VCS, Version Control System ),其中比较常 ...

  7. <状压DP>solution-POJ3311_Hie with the Pie

    Hie with the Pie Description The Pizazz Pizzeria prides itself in delivering pizzas to its customers ...

  8. 技术派-常用的一些VS相关的宏名

    用户宏 ConfigurationName 配置名字,通常是Debug或者Release IntDir 编译器使用的中间目录,产出obj文件 OutDir 链接器使用的输出目录 ProjectDir ...

  9. 每日一练PAT_B_PRAC_1005斐波那契凤尾

    NowCoder号称自己已经记住了1-100000之间所有的斐波那契数.为了考验他,我们随便出一个数n,让他说出第n个斐波那契数.当然,斐波那契数会很大.因此,如果第n个斐波那契数不到6位,则说出该数 ...

  10. 练习：等待用户输入input()

    等待用户输入 执行下面的程序在按回车键后就会等待用户输入: 实例(Python 3.0+) #!/usr/bin/python3 input("\n\n按下 enter 键后退出." ...