Uncaught TypeError: Cannot set property \\\'onclick\\\' of null解决办法
如果把js内容直接放在这个head标签以内，button按钮不能正常点击更换body的背景颜色，报错提示：demo6.html:16 Uncaught TypeError: Cannot set property 'onclick' of null，分析解决办法如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击背景变色js事件问题</title>
<style type="text/css">
button{
cursor: pointer;
}
</style>
<script>
// 问题描述,如果直接把这下面段代码放在页面这里，控制台提示Uncaught TypeError: Cannot set property 'onclick' of null
obj=document.getElementById('dj');
obj.onclick=function(){
document.body.style.background='#f90';
}
// 解决办法二:
// window.onload = function () {
// var Btn = document.getElementById('dj');
// Btn.onclick = function () {
// console.log("push the button ");
// document.body.style.background='#f90';
// }
// }
</script>
<body>
<button id="dj">点击</button>
</body>
<!-- <script type="text/javasript"> -->
<!-- 相关问题：<script></script> vs/or <script type=”text/javasript”></script>
如果用H5就不需要加，因为H5默认属性就是text/javascript，
而 HTML 4.01 and XHTML 1.0 规范 type 属性是需要的，如果用H5<script></script>是可以且比较好的选择。最重要一点是加了不起作用也不报错 -->
<!-- 解决办法一： -->
<!-- <script>
obj=document.getElementById('dj');
obj.onclick=function(){
console.log('测试');
alert('Surprise')
document.body.style.background='#f90';
}
</script> -->
</html>问题归纳总结：
第一种解决办法直接js文件放在页面底部加载，第二种window onload()包裹起来，出现问题原因：W3School中介绍浏览器先加载完按钮节点才执行JS，当浏览器自顶向下解析时，找不到onclick绑定的按钮节点了,网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能导致无法获取对象的情况,。window.onload是一个事件，window.onload表示页面加载完成后执行的函数，js按照页面自上而下的顺序说明的，页面上的Javascript代码是HTML文档的一部分，所以Javascript在页面装载时执行的顺序就是其引入标记!
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！