转载自： 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. 事务 c#

    事务->:事务是恢复和并发控制的基本单位 ->事务具有四个特性:原子性.隔离性.一致性.持久性.这四个特性通常称为ACID Begin transaction/tran   --开始事务 ...

  2. Linux环境nginx的配置

    1.创建nginx运行账户www并加入到www组,不允许www用户直接登录系统,查看创建. groupadd www useradd -g www www -s /bin/false tail /et ...

  3. Java连接数据库 #01# JDBC单线程适用

    官方教程(包括 javase的基础部分):JDBC Basics 重新梳理.学习一下“Java连接数据库”相关的内容. 因为最开始没有认真学多线程和JDBC,一直在自己写的多线程程序中维持下面的错误写 ...

  4. 使用UI管理docker

    比较全面的对比 wangzi19870227 比较推荐的有两种(http://dockone.io/article/225): Shipyard 和 dockerui https://docs.doc ...

  5. win7 powershell配色方案

    首先我是参考微软的word的, look~ Windows PowerShell 配置文件 要配置powershell很简单, 就几步 1.显示 Windows PowerShell 配置文件的路径 ...

  6. 让bat批处理后台运行,不显示cmd窗口(完全静化)

    背景:由于我有某云的服务器(win server), 上面挂有好几个程序, 为了更好的监控他们, 我使用了一个最笨的方法, 就是下面的方法. 实现:我要监控的程序有三个, 成为ABC吧, 下面先把三个 ...

  7. Java基础语法(上)

    Java编译报错出现非法字符,原因是存在中文字符. Java关键字的字母都是小写. Java是一种强类型语言,针对每一种数据都给出了明确的数据类型. 数据类型分类: A:基本数据类型 B:引用数据类型 ...

  8. Vue父子组件生命周期

    转载自:https://blog.csdn.net/a8725585/article/details/79092505 vue父子组件钩子函数触发顺序 beforeMount后mounted前构造子组 ...

  9. java调用ws服务

    1.找到ws服务地址,例如:http://www.webxml.com.cn/WebServices/MobileCodeWS.asmx 2.新建项目 3.进入命令行窗口,进入当前项目src目录下,然 ...

  10. EGIT

    https://jingyan.baidu.com/article/64d05a0262f013de55f73bcc.html