如果把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. Java服务端两个常见的并发错误

    理想情况来讲,开发在开始编写代码之前就应该讲并发情况考虑进去,但是大多数实际情况确是,开发压根不会考虑高并发情况下的业务问题.主要原因还是因为业务极难遇到高并发的情况. 下面列举两个比较常见的后端编码 ...

  2. Excel Application操作指南

    概述 Application对象是Microsoft Office Excel 2007对象模型中最高级别的对象,表示Excel程序自身.Application对象提供正在运行的程序的信息.应用于程序 ...

  3. python接口自动化测试 - configparser配置文件解析器详细使用

    configparser简介 ConfigParser模块已在Python 3中重命名为configparser 该模块定义了ConfigParser类. ConfigParser类实现一种基本的配置 ...

  4. SpringBoot_Web开发_定制错误数据

    SpringBoot默认的错误处理机制 默认效果: ​ 1).浏览器,返回一个默认的错误页面 2).如果是其他客户端,默认响应一个json数据 原理: ​ 可以参照ErrorMvcAutoConfig ...

  5. 使用Airtest进行UI自动化测试

    一.环境搭建 1.Airtest客户端下载 访问官网http://airtest.netease.com/,根据自己的系统下载相应的客户端安装: 2.python工具下载与环境搭建 在本地python ...

  6. Miniio对象储存服务器安装教程

    #创建minio专用文件目录 mkdir -p /app/minio/data mkdir -p /app/minio/config chmod -R 777 /app/minio/data chmo ...

  7. 必须掌握的50条Linux基础操作命令

    说明: 根据笔者平时使用情况,并结合参考一些其他资料,精心整理出以下必须掌握的50条Linux基础命令. 命令: 1. ssh 登录到远程主机 $ ssh -l jsmith remotehost.e ...

  8. 机器学习李航——Adaboost课本例题实现

    例8.1Adaboost的例子 注意求D3或者D4的时候只需要把w替换一下就行,记得还得改阈值.这个代码算个半自动的,因为还需要手动改一下. import numpy as np def getA(e ...

  9. Oracle数据库、实例、用户、表空间、表之间的关系

    完整的Oracle数据库通常由两部分组成:Oracle数据库和数据库实例. 1) 数据库是一系列物理文件的集合(数据文件,控制文件,联机日志,参数文件等): 2) Oracle数据库实例则是一组Ora ...

  10. 第四次作业：使用Packet Tracer理解RIP路由协议及ICMP协议

    0 个人信息 张樱姿 201821121038 计算1812 1 实验目的 理解RIP路由表的建立与更新 感受RIP坏消息传得慢 2 实验内容 使用Packet Tracer,正确配置网络参数,使用命 ...