<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//根据id属性的值从文档中获取这个元素
var btnObj=document.getElementById("btn");
//为当前的这个按钮元素(对象),注册点击事件,添加事件处理函数 (匿名函数)
btnObj.onclick=function(){
//响应做的事情
alert("jaja");
};
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn" />
</body>
</html>
上面代码执行后，显示
进行更改，需要把js文件放在底部加载：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="显示效果" id="btn" />
<script>
//根据id属性的值从文档中获取这个元素
var btnObj=document.getElementById("btn");
//为当前的这个按钮元素(对象),注册点击事件,添加事件处理函数 (匿名函数)
btnObj.onclick=function(){
//响应做的事情
alert("jaja");
};
</script>
</body>
</html>
代码正常执行
原因：当js文件放在head里面时，如果绑定了onclick或者onmouseover事件，就会出现如上图类似的错误，是因为浏览器的加载你写的html文档的顺序是从上往下，加载完按钮节点才执行的js，所以当浏览器自顶向下解析时，找不到onclick绑定的按钮节点，于是报错。
解决办法：第一，把js文件放在底部加载；第二，使用window.onload=function(){}包裹js内容。
JS事件报错之Cannot set property 'onclick' of null
原文：https://www.cnblogs.com/zhangDY/p/11344502.html