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 ...
随机推荐
- 案例：通过shell脚本实现mysql数据备份与清理
Shell是系统的用户界面,提供了用户与内核进行交互操作的一种接口.它接收用户输入的命令并把它送入内核去执行,实际上Shell是一个命令解释器,它解释由用户输入的命令并且把它们送到内核,不仅如此,Sh ...
- node 按行读取文件
var readline = require('readline'); var fs = require('fs'); var os = require('os'); var fReadName = ...
- Java 线程类的一些常用方法
线程类的一些常用方法: sleep(): 强迫一个线程睡眠N毫秒. isAlive(): 判断一个线程是否存活. join(): 等待线程终止. activeCount(): 程序中活跃的线程数 ...
- Java的类的详解
首先呢,我承认上一次我理解的有误. 1.构造方法的作用:是初始化一个对象,而不是成员变量,它和get和set方法都有给成员变量赋值的功能. 2.下来说一下JVM调用main方法的过程: a.静态变量赋 ...
- The logback manual #02# Architecture
索引 Logback's architecture Logger, Appenders and Layouts Effective Level(有效等级)又名Level Inheritance Ret ...
- Prometheus监控学习笔记之教程推荐
最近学习K8S和基于容器的监控,发现了如下的教程质量不错,记录下来以备参考 1. K8S最佳实战(包括了K8S的Prometheus监控和EFK日志搜集) https://jimmysong.io/k ...
- gdb调试程序函数名为问号，什么原因？step by step解决方案
gdb调试程序函数名为问号,什么原因? http://bbs.chinaunix.net/thread-1823649-1-1.html http://www.bubuko.com/infodetai ...
- poj 3687 Labeling Balls - 贪心 - 拓扑排序
Windy has N balls of distinct weights from 1 unit to N units. Now he tries to label them with 1 to N ...
- Codeforces Round #424 (Div. 2, rated, based on VK Cup Finals) Problem A - B
Array of integers is unimodal, if: it is strictly increasing in the beginning; after that it is cons ...
- Java排序算法之选择排序
一.算法原理 简单选择排序的基本思想:给定数组:int[] arr={里面n个数据}:第1趟排序,在待排序数据arr[1]~arr[n-1]中选出最小的数据,将它与arrr[0]交换:第2趟,在待排序 ...