一个很奇怪的问题

为什么<button>标签放在script标签前面(如下代码a)，点击button后<h1>标签里面的内容可以显示时间，而放在其后面（代码b）时却不能显示？
代码a:<html>
<head> </head> <body>
<h1 id="header" ></h1>
<button id="demo" type="button" >click me</button>
<script>
document.getElementById("demo").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("header").innerHTML=Date();
}
</script>
</body></html>
代码b<html>
<head> </head> <body>
<h1 id="header" ></h1>

<script>
document.getElementById("demo").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("header").innerHTML=Date();
}
</script>
                <button id="demo" type="button" >click me</button>
</body></html>

解决方案 »

  1.   

    页面元素解析的顺序问题document.getElementById("demo").onclick=function(){displayDate()};
    执行这个代码的时候  会从当前已经解析的页面中 查找 id 是 demo 的dom你的<button id="demo"  放在这个代码后面  那么页面中当然找不到这个dom1。从这个 执行中 你要能正确理解页面元素加载次序和解析 对js代码的影响
    2。你以后应该从类似问题的表现来 反推原因 大胆的去理解和假设
      

  2.   

    因为代码是按从上自下执行的，当执行到document.getElementById("demo")时，dom树中并没有demo元素，所有有错误提示有两种解决方案，
    1.把js放到外部文件中,因为首先建立dom树再连接外部文件
    2.在dom准备好时再执行js,像jQuery的document.ready就是这个意思
      

  3.   


    试了一下把js放在外部文件就不会出现上述问题了，也就是说一般的话js用外连方式比较好？
      

  4.   

    找一本JS权威经典看一下，这些都是基础而已，要不放在<head>里面，要不就放在你的控件后面
      

  5.   


    试了一下把js放在外部文件就不会出现上述问题了，也就是说一般的话js用外连方式比较好？还是没理解 
      

  6.   


    试了一下把js放在外部文件就不会出现上述问题了，也就是说一般的话js用外连方式比较好？还是没理解 我是说放在外面的话就会先建立好dom再执行js，就不会出现找不到"demo"这种情况了吧