如果把js内容直接放在这个head标签以内，button按钮不能正常点击更换body的背景颜色，报错提示：demo6.html:16 Uncaught TypeError: Cannot set property 'onclick' of null，分析解决办法如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>点击背景变色js事件问题</title> 7 <style type="text/css"> 8 button{ 9 cursor: pointer; 10 } 11 </style> 12 <script> 13 // 问题描述,如果直接把这下面段代码放在页面这里，控制台提示Uncaught TypeError: Cannot set property 'onclick' of null 14 15 obj=document.getElementById('dj'); 16 obj.onclick=function(){ 17 document.body.style.background='#f90'; 18 } 19 20 // 解决办法二: 21 // window.onload = function () { 22 // var Btn = document.getElementById('dj'); 23 // Btn.onclick = function () { 24 // console.log("push the button "); 25 // document.body.style.background='#f90'; 26 // } 27 // } 28 </script> 29 <body> 30 <button id="dj">点击</button> 31 </body> 32 <!-- <script type="text/javasript"> --> 33 <!-- 相关问题：<script></script> vs/or <script type=”text/javasript”></script> 34 如果用H5就不需要加，因为H5默认属性就是text/javascript， 35 而 HTML 4.01 and XHTML 1.0 规范 type 属性是需要的，如果用H5<script></script>是可以且比较好的选择。最重要一点是加了不起作用也不报错 --> 36 37 <!-- 解决办法一： --> 38 <!-- <script> 39 obj=document.getElementById('dj'); 40 obj.onclick=function(){ 41 console.log('测试'); 42 alert('Surprise') 43 document.body.style.background='#f90'; 44 } 45 </script> --> 46 </html>
问题归纳总结：第一种解决办法直接js文件放在页面底部加载，第二种window onload()包裹起来，出现问题原因：W3School中介绍浏览器先加载完按钮节点才执行JS，当浏览器自顶向下解析时，找不到onclick绑定的按钮节点了,网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能导致无法获取对象的情况,。window.onload是一个事件，window.onload表示页面加载完成后执行的函数，js按照页面自上而下的顺序说明的，页面上的Javascript代码是HTML文档的一部分，所以Javascript在页面装载时执行的顺序就是其引入标记!