转载自: 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的问题的更多相关文章

  1. Uncaught TypeError: Cannot set property 'onclick' of null解决办法

    如果把js内容直接放在这个head标签以内,button按钮不能正常点击更换body的背景颜色,报错提示:demo6.html:16 Uncaught TypeError: Cannot set pr ...

  2. Cannot set property 'onclick' of null报错

    经常几个页面使用公共js文件, 原来遇到也没留意, 原来是本页面执行的时候, 其他页面也在执行并赋予id于onclick. 因为页面是正常情况下是不存在null和undefined if(null){ ...

  3. 浏览器出现Cannot set property 'onclick' of null的问题

    Part1: 当js文件放在head里面时,如果绑定了onclick事件,就会出现这样的错误, 是因为W3School的写法是浏览器先加载完按钮节点才执行的js,所以当浏览器自顶向下解析时,找不到on ...

  4. 【jQuery学习】用JavaScript写一个输出多选框的个数报错:Cannot set property 'onclick' of null"

    说明:代码段来源于:<锋利的jQuery> 根据代码段我补充的代码如下: <!DOCTYPE html> <html> <head> <meta ...

  5. 报错之-Cannot set property 'onclick' of null

    当js文件放在head里面时,如果绑定了onclick或者onmouseover事件,就会出现如下图类似的错误,是因为浏览器的加载你写的html文档的顺序是从上往下,加载完按钮节点才执行的js,所以当 ...

  6. Uncaught TypeError: Cannot set property onclick' of null

    如果出现以上问题,只需要把<script src="xxx.js"></script> 移动到最后,</body>的前面;

  7. 百度ueditor 实例化 Cannot set property 'innerHTML' of null 完美解决方案

    此时此刻,我正在用博客园推荐的TinyMCE编辑器写这个博客,突然想起最近在项目中使用百度ueditor编辑器中的一些经历.所以记录在此,与大家分享. 不得不说,百度ueditor是一款很好的在线编辑 ...

  8. 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 ...

  9. Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null

    在开发Ext 项目中如果遇到 Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null 这个错误,检查下renderT ...

随机推荐

  1. Maven配置阿里云镜像仓库

    配置文件:D:\MyDev\Maven\apache-maven-3.0.5\conf\settings.xml <mirrors> <mirror> <id>al ...

  2. ltp makefile 解析

    困惑于 /include/mk/automake.mk中出现了第一个目标 而makefile却任然将all当做最终目标 测试了一番后发觉: ifeq ($(MAKE_3_80_COMPAT),1)# ...

  3. react复习总结(2)--react生命周期和组件通信

    这是react项目复习总结第二讲, 第一讲:https://www.cnblogs.com/wuhairui/p/10367620.html 首先我们来学习下react的生命周期(钩子)函数. 什么是 ...

  4. android studio下载地址

    AndroidStudio3.0 下载地址——高速下载 https://www.androiddevtools.cn/   2017年08月20日 22:41:09 qq风轻云淡 阅读数:5559   ...

  5. 错误 1 error LNK2019: 无法解析的外部符号 __imp__pthread_create,该符号在函数 _main 中被引用 解决方法

    晚上花几分钟在windows下测了下pthread的用法,出现错误 1 error LNK2019: 无法解析的外部符号 __imp__pthread_create,该符号在函数 _main 中被引用 ...

  6. 【题解】Luogu P2522 [HAOI2011]Problem b

    原题传送门 这题需要运用莫比乌斯反演(懵逼钨丝繁衍) 我们看题面,让求对于区间\([a,b]\)内的整数x和\([c,d]\)内的y,满足$ gcd(x,y)=k$的数对的个数 我们珂以跟容斥原理(二 ...

  7. python简说(五)操作文件

    f = open('users.txt',encoding='utf-8') #读文件的时候,必须存在在才可以读 文件对象,或者文件句柄res = f.read()print(res)f.close( ...

  8. 《大话处理器》Cache一致性协议之MESI (转)

    原文链接:http://blog.csdn.net/muxiqingyang/article/details/6615199 Cache一致性协议之MESI 处理器上有一套完整的协议,来保证Cache ...

  9. canvas-简单快速实现知乎登录页背景效果

    前言 打开知乎的登录页,就可以看到其背景有一个动效,看起来好像蛮不错的样子: 这个效果使用canvas是不难实现的,接下来就一步一步地讲解并实现这个效果. 分析 在动工之前先分析这个效果到底是如何运动 ...

  10. JUnit Parametrized Tests

    Junit allows us to create parametrized tests. Parametrized test class has to be annotated with the @ ...