文档章节

Cannot set property 'onclick' of null的问题

西迷岛主
 西迷岛主
发布于 2014/12/01 18:32
字数 289
阅读 27243
收藏 4

今天看了一个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事件。




© 著作权归作者所有

西迷岛主
粉丝 4
博文 31
码字总数 10263
作品 0
广州
个人站长
私信 提问
js编写评论功能出现的疑惑,求解答

1.首先,我用ajax获取了后端传过来的文本等内容,然后通过循环将每个文本主体内容都都通过append加入到一个div中。 2.然后文本主体内容中有个button:评论 3.现在想要通过获取button的id,使...

蛋炒饭加冰块
2017/11/20
211
7
PHP沉思录-第二篇-PME模型-左轻侯-《程序员》2007年7月号

本文发表在《程序员》第7期 PHP沉思录之二 左轻侯 PME模型 在大规模的程序设计中,组件(component)已经成为一种非常流行的技术。常见的组件技术都基于PME模型,即属性(Property)、方法(...

一配
2015/10/16
12
0
React中this丢失的解决方法

我们在给一个dom元素绑定方法的时候,例如: React组件中不能获取refs的值,页面报错提示:Uncaught TypeError: Cannot read property 'refs' of null or undefind 小栗子 React中的bind同上...

薛定喵的谔
03/07
0
0
Hibernate处理set集合时,为什么不能向数据库写入数据

为什么数据库不能被添加数据 [问题点数:40分] 快速回复 只显示楼主 关注帖子 为什么数据库不能被添加数据 [问题点数:40分] Pengjx2014 Pengjx2014 本版等级: 结帖率:0% 楼主 发表于: 20...

pjx
2015/04/27
408
0
使用createElement()创建checkbox不能设置name属性

今天在使用document.createElement()动态创建复选框时,发现不能为其name赋值,以下是测试代码: Test

kjmeng
2008/08/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

威胁快报|新兴挖矿团伙借助shodan作恶,非web应用安全再鸣警钟

近日,阿里云安全发现了一个使用未授权访问漏洞部署恶意Docker镜像进行挖矿的僵尸网络团伙。我们给这一团伙取名为Xulu,因为该团伙使用这个字符串作为挖矿时的用户名。 Xulu并不是第一个攻击...

阿里云官方博客
22分钟前
3
0
MD5 加密需要注意编码格式!!!

相信做过MD5加密的童鞋都遇到过字符编码的坑,一般加密出来的结果和其他人不一样都是字符编码不一致导致的,比如类文件的字符编码、浏览器的字符编码等和对方不一致,所以就需要转码统一字符...

jason_kiss
24分钟前
2
0
python中字符串的操作

https://www.jianshu.com/p/7fc851b6a7ee

writeademo
33分钟前
1
0
如何制定 Java 性能调优标准?

想让你的程序更快更稳,但是系统经常出各种 bug,无从下手?Java 性能调优全攻略来啦! 我有一个朋友,有一次他跟我说,他们公司的系统从来没有经过性能调优,功能测试完成后就上线了,线上也...

Java领航员
34分钟前
2
0
java博客项目

项目地址:https://github.com/otale/tale 项目演示地址:https://tale.biezhi.me/ 项目介绍:Tale使用轻量级mvc框架Blade进行开发,默认主题使用漂亮的pinghsu, 特征 设计简洁,界面美观 ...

编程资源库
35分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部