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 ...
随机推荐
- logger日志模块
简单配合模式: import logging#简单配置logging.basicConfig(level=logging.DEBUG, format='%(asctime)s %(filename)s ...
- Spring P命名空间 02
P命名空间 装配属性 使用<property> 元素为Bean 的属性装配值和引用并不太复杂.尽管如此,Spring 的命名空间p 提供了另一种Bean 属性的装配方式,该方式不需要配置如 ...
- ES6知识整理（7）--Set和Map数据结构
(文章会同步到博客园,技术类文章还是该让搜索引擎察觉比较好) Set构造函数 初始化一个值不重复的数组,适合做数组去重. 2种数组去重的方法: 这里再说下Array.from(),表示以一个类数组|| ...
- JavaScript快速总结之一
js格式和位置: <!--js内容可以在head中,也可以在body中,不同位置执行顺序会有区别 ,另外也可以单独放到一个js文件中,这样方便维护和修改,而且,可以加快html页面的加载速度.- ...
- Mysql 利用拷贝data目录文件的方式迁移mysql数据库
Mysql 利用拷贝data目录文件的方式迁移mysql数据库 步骤如下: 1.首先要确定data目录 这个问题困扰了我很久,因为网上的帖子大部分只是说拷贝mysql数据库目录下的data文件夹中的数 ...
- rocketmq消息重复推送的问题
最近,在公司的测试环境,遇到个问题,每次重启应用重启后,原来消费过的消息又被重复推送了一遍,消费者和生产者代码如下: package com.tf56.queue.client; import jav ...
- gcc常用编译选项
“-Wall”选项打开所有最常用到的编译警告,强烈建议打开,可以捕捉到许多在C编程中最常发生的错误. “-o”选项来为可执行文件指定一个不同的输出文件. “-c”用于把源码文件编译成对象文件. 对象文 ...
- Linux模拟僵尸进程并kill
模拟系统有僵尸进程后怎么解决 僵尸进程 #include <stdio.h> #include <sys/types.h> int main() { //fork a chil ...
- 如何利用好github的问题
github对我来说真的是一个超好的平台,不过之前只是把它仓库来使用, 后来在大佬告诉我应该怎么使用github,今天就来总结下如何利用好github,让它发挥最大的威力. 1.把github当做百科 ...
- Python3 tkinter基础 Listbox delete 删除单个、所有元素
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...