Cannot set property 'onclick' of null的问题
转载自： https://my.oschina.net/ximidao/blog/351017
摘要: 测试点击事件的时候浏览器报错，提示Uncaught TypeError: Cannot set property 'onclick' of null
今天看了一个W3School JS点击事件的测试案例，详情页：http://www.w3school.com.cn/tiy/t.asp?f=js_dom_event_onclick4，其代码为：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>
<button id="myBtn">点击这里</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>
点击效果正常，而我平时测试代码的时候一般习惯把JS代码写在head标签里面，上述的代码如果将JS代码移到head标签，浏览器就会报错，提示：Uncaught TypeError: Cannot set property 'onclick' of null。
分析了一下代码，W3School的写法是浏览器先加载完按钮节点才执行的JS，因此我将代码改为：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
window.onload=function(){
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
}
</script>
</head>
<body>
<p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p> <button id="myBtn">点击这里</button>
<p id="demo"></p>
</body>
</html>
测试通过，说明节点需要先加载完才能执行onclick事件。
Cannot set property 'onclick' of null的问题的更多相关文章
- Uncaught TypeError: Cannot set property 'onclick' of null解决办法
如果把js内容直接放在这个head标签以内,button按钮不能正常点击更换body的背景颜色,报错提示:demo6.html:16 Uncaught TypeError: Cannot set pr ...
- Cannot set property 'onclick' of null报错
经常几个页面使用公共js文件, 原来遇到也没留意, 原来是本页面执行的时候, 其他页面也在执行并赋予id于onclick. 因为页面是正常情况下是不存在null和undefined if(null){ ...
- 浏览器出现Cannot set property 'onclick' of null的问题
Part1: 当js文件放在head里面时,如果绑定了onclick事件,就会出现这样的错误, 是因为W3School的写法是浏览器先加载完按钮节点才执行的js,所以当浏览器自顶向下解析时,找不到on ...
- 【jQuery学习】用JavaScript写一个输出多选框的个数报错:Cannot set property 'onclick' of null"
说明:代码段来源于:<锋利的jQuery> 根据代码段我补充的代码如下: <!DOCTYPE html> <html> <head> <meta ...
- 报错之-Cannot set property 'onclick' of null
当js文件放在head里面时,如果绑定了onclick或者onmouseover事件,就会出现如下图类似的错误,是因为浏览器的加载你写的html文档的顺序是从上往下,加载完按钮节点才执行的js,所以当 ...
- Uncaught TypeError: Cannot set property onclick' of null
如果出现以上问题,只需要把<script src="xxx.js"></script> 移动到最后,</body>的前面;
- 百度ueditor 实例化 Cannot set property 'innerHTML' of null 完美解决方案
此时此刻,我正在用博客园推荐的TinyMCE编辑器写这个博客,突然想起最近在项目中使用百度ueditor编辑器中的一些经历.所以记录在此,与大家分享. 不得不说,百度ueditor是一款很好的在线编辑 ...
- org.hibernate.PropertyValueException: not-null property references a null or transient value:
org.hibernate.PropertyValueException: not-null property references a null or transient value: com.bj ...
- Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null
在开发Ext 项目中如果遇到 Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null 这个错误,检查下renderT ...
随机推荐
- Linux系统管理和维护常用命令
Linux系统管理和维护常用命令 ls 命令 功能说明 ls 命令显示指定工作目录下的内容,列出工作目录所包含的文件及子目录. 语法结构: ls [选项] [路径或文件] ls 选项及说明 -a 显示 ...
- Django后端项目---- Rest Framework(2)
一.认证(补充的一个点) 认证请求头 #!/usr/bin/env python # -*- coding:utf-8 -*- from rest_framework.views import API ...
- Kali linux apt-get update 失败，无release……（最有效）
设置源 编辑 /etc/apt/sources.list nano /etc/apt/sources.list 清空文件内所有内容后添加 deb http://mirrors.ustc.edu.cn/ ...
- apache编译安装php后需要注意以下配置
安装后, 编辑apache配置文件 vi /usr/local/apache2/conf/httpd.conf 可以看到 LoadModule php7_module modules/libphp7. ...
- MySQL备份与恢复-mydumper
上一片博文中,我们说明了mysqldump的备份与恢复.因为mysqldump是单线程导出,单线程恢复的,因此备份与恢复的时间比较长! 首先来安装mydumper: 下载源码:https://gith ...
- TF-IDF原理与实现
TF-IDF 原理与实现 目录 1.原理 2.伪代码 3.实现 1.原理 \[ TF-IDF = tf_{t,d} \times idf_{t}\\ tf_{t,d} = \frac{术语t在文档d中 ...
- JavaBean的getters和setters方法自动生成
xgClass.java文件: public class XgClass { private String ccCityDerate1000Num; } 添加getter/setter方法: 在代码区 ...
- css-过渡
css过渡:元素从一种样式逐渐改变为另一种的效果.过渡所需的条件:1.所过渡的元素必须有css样式.2.必须有过渡时间.以下是过渡元素的属性:transition:简写属性,用于在一个属性中设置四个过 ...
- Python3基础 response.read 输出网页的源代码
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- 那些离不开的 Chrome 扩展插件
虽然Chrome浏览器是个吃内存的怪兽,但是,它却因为启动速度.调试功能等成为了程序猿的必备浏览器!今天有时间,整理一下自己最常用的一些Chrome扩展吧: 常用网页浏览非开发类扩展: Tamperm ...