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 ...
随机推荐
- XML学习笔记——关于XML解析器
本篇文章基于W3C而写 在Firefox及其他浏览器中的XML解析器(除IE) var xmlDoc=document.implementation.createDocument("&quo ...
- 生产者消费者代码学习，Producer_Consuner
使用BlockingQuery实现生产者者消费者:考虑并发,解耦. 生产者消费者模式是面向过程的设计模式. 生产者制造数据 ------> 生产者把数据放入缓冲区 -------> ...
- 安装mysql遇到的问题
想在自己的PC上安装mysql服务器,首先在官网下载mysql的安装文件. MySQL安装文件分两种 .msi和.zip ,.msi需要安装,.zip文件需要配置环境变量. 我首先下载的是不需要安装的 ...
- 【Java并发基础】管程简介
前言 在Java 1.5之前,Java语言提供的唯一并发语言就是管程,Java 1.5之后提供的SDK并发包也是以管程为基础的.除了Java之外,C/C++.C#等高级语言也都是支持管程的. 那么什么 ...
- Windows10 java环境配置
1.下载 JDK 下载地址:https ://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html 点击下载按钮 ...
- MySQL会话控制限制登录次数
前言 一般我们开发环境的MySQL是没有配置登录保护的,但仅限于开发环境,正式环境是不允许无限制登录,存在很大的风险. MySQL 5.7 以后提供了Connection-Contro ...
- config 模块
import configparser #配置文件 config = configparser.ConfigParser()config["DEFAULT"] = {'Server ...
- VS2013下搭建SDL开发环境
什么是SDL? SDL是 "Simple DirectMedia Layer"的缩写,它是一个开源的项目. 为多媒体编程而设计 SDL是一个跨平台的多媒体库,它通过OpenGL和2 ...
- QT透明显示文字
实现效果: 代码: #ifndef IMAGINIST_H #define IMAGINIST_H #include <QtWidgets/QWidget> #include <Qt ...
- sublime: javascript/css 的格式化
Sublime Text 3 破解版 + 注册机 + 汉化包 + 教程 http://www.xiumu.org/note/sublime-text-3.shtml 1.sublime 如果控制菜单选 ...