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 ...
随机推荐
- 记账本微信小程序开发二
新建一个微信小程序项目 熟悉软件各种操作.
- Django框架----logging配置
我写Django项目常用的logging配置.(追加在setting.py文件中) LOGGING = { 'version': 1, 'disable_existing_loggers': Fals ...
- 使用Holer外网SSH访问内网（局域网）Linux系统
1. Holer工具简介 Holer exposes local servers behind NATs and firewalls to the public internet over secur ...
- 结合sklearn的可视化工具Yellowbrick：超参与行为的可视化带来更优秀的实现
https://blog.csdn.net/qq_34739497/article/details/80508262 Yellowbrick 是一套名为「Visualizers」的视觉诊断工具,它扩展 ...
- await
单个的task await task 多个await asyncio.wait(tasks)
- sqlalchemy 多对多关系
# -*- coding: utf-8 -*- from sqlalchemy import Column, String, create_engine,ForeignKey,Text,Integer ...
- Docker MySQL5.5镜像
定制MySQL的镜像有个很大的难题:mysqld启动之前要初始化数据目录,5.5自带有空账号密码需要初始化. Dockerfile FROM centos # 拷贝需要的安装和MySQL初始脚本 CO ...
- Elasticstarch 相关
索引: 在Elasticsearch中存储数据的行为就叫做索引(indexing),不过在索引之前,我们需要明确数据应该存储在哪里. 在Elasticsearch中,文档归属于一种类型(type),而 ...
- js输出
JavaScript 可以通过4种不同的方式在html页面输出数据 1.使用window.alert() 弹出警告框,由于window为js的内置类,可简写为alter() <script> ...
- Java版 家政服务 社区服务 家装服务平台 源码 有案例 可定制
产品说明: 家装服务平台.社区服务平台.服务类型的平台--公司成熟产品 包括工匠注册.资质认证.发布服务产品.会员注册.预约服务.工匠定价.执行服务.服务完毕填写工作日志上传现场照片.会员确认服务.返 ...