Uncaught TypeError: Cannot set property 'onclick' of null解决办法
如果把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在页面装载时执行的顺序就是其引入标记!
Uncaught TypeError: Cannot set property 'onclick' of null解决办法的更多相关文章
- Uncaught TypeError: Cannot set property onclick' of null
如果出现以上问题,只需要把<script src="xxx.js"></script> 移动到最后,</body>的前面;
- Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null
在开发Ext 项目中如果遇到 Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null 这个错误,检查下renderT ...
- Uncaught TypeError: Cannot set property 'innerHTML' of null
学习Chrome插件时,要在弹出页面中显示当前时间,结果怎样也显示不出来 看了 http://www.cnblogs.com/mfryf/p/3701801.html 这篇文章后感悟颇深 通过调试发现 ...
- Three.js three.js Uncaught TypeError: Cannot read property 'getExtension' of null
在调试Three.js执行加载幕布的时候,突然爆出这个错误three.js Uncaught TypeError: Cannot read property 'getExtension' of nul ...
- JavaScript Uncaught TypeError: Cannot read property 'value' of null
用 JavaScript 操作 DOM 时出现如下错误: Uncaught TypeError: Cannot set property 'value' of null Uncaught TypeEr ...
- 前台报错:Uncaught TypeError: Cannot read property '0' of null
错误现象: var div1=mycss[0].style.backgroundColor; //这一行提示360和chrome提示:Uncaught TypeError: Cannot read ...
- 解决sweetalert 无故报错 elem.className.replace Uncaught TypeError: Cannot read property 'className' of null
今天碰到这么一个问题,在使用sweetalert的时候时有时无会报错 elem.className.replace Uncaught TypeError: Cannot read property ' ...
- vue报错 Uncaught TypeError: Cannot read property ‘children ’ of null
Uncaught TypeError: Cannot read property ‘children ’ of null ratings未渲染完毕,就跳走goods了,取消默认跳转,即可
- Uncaught TypeError: Cannot read property 'ownerDocument' of null
/********************************************************************* * Uncaught TypeError: Cannot ...
随机推荐
- pikachu漏洞练习之sql注入
这里因为实验的时候只记录了一部分所以就展示一部分 1.1.1数字型注入 (1)看到界面发现是查询id功能,没有在url里看到有传参所以应该是post方法提交数据. (2)进行sql注入之前我们最好是先 ...
- chrome最耐看的主题
google chrome最耐看的主题James White大家可以尝试一下
- 机器学习环境配置系列一之CUDA
本文配置的环境为redhat6.9+cuda10.0+cudnn7.3.1+anaonda6.7+theano1.0.0+keras2.2.0+jupyter远程,其中cuda的版本为10.0. 第一 ...
- 使用requests模块的网络编程
python操作网络,也就是打开一个网站,或者请求一个http接口,本篇是介绍使用request模块的使用方式. 在使用requests模块之前需要先安装,在cmd中输入:pip install re ...
- [校内训练20_01_20]ABC
1.问有多少个大小为N的无标号无根树,直径恰好为L.$N,L \leq 200$ 2.问一个竞赛图中有多少个长度为3.4.5的环.$N \leq 2000$ 3.给出一些直线和单个点A,问这些直线的交 ...
- 将Ubuntu下网卡名称enss改为eth0
将Ubuntu下网卡名称enss改为eth0 sudo nano /etc/default/grub 找到GRUB_CMDLINE_LINUX=""改为GRUB_CMDLINE ...
- javascript的对象、类和方法
1.类和对象的概念: 1.所有的事物都是一个对象,而类就是具有相同属性和行为方法的事物的集合 2.在JavaScript中建立对象的目的就是将所有的具有相同属性的行为的代码整合到一起,方便使用者的管理 ...
- php--->依赖注入（DI）实现控制反转（IOC）
依赖注入(DI)实现控制反转(IOC) DI和IOC概念理解 当一个类的实例需要另一个类的实例协助时,在传统的程序设计过程中,通常由调用者来创建被调用者的实例.而采用依赖注入的方式,创建被调用者的工作 ...
- Centos 7 最小化时间服务部署配置
基本原理 Centos 7 我所了解有两种时间服务,NTPD与chronyd:两者对Centos 7 的支持都很好,有对chrony非常夸赞的,不过我这里只讲ntpd:有对chrony有想法的可以自行 ...
- java基础算法(一)：最大子序列和问题的多种算法思路
问题: /** * 给定一个整数数组 nums ,找到一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和,并顺序打印子序列. * 示例: * 输入: [-2,1,-3,4,-1,2,1 ...