87,992
社区成员
发帖
与我相关
我的任务
分享一个很奇怪的问题
为什么<button>标签放在script标签前面(如下代码a)，点击button后<h1>标签里面的内容可以显示时间，而放在其后面（代码b）时却不能显示？
代码a:
代码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>
...全文
请发表友善的回复…
发表回复
freviner 2013-07-19
- 打赏
- 举报
试了一下把js放在外部文件就不会出现上述问题了，也就是说一般的话js用外连方式比较好？[/quote]
还是没理解 。。。[/quote]
我是说放在外面的话就会先建立好dom再执行js，就不会出现找不到"demo"这种情况了吧
KK3K2005 2013-07-19
- 打赏
- 举报
试了一下把js放在外部文件就不会出现上述问题了，也就是说一般的话js用外连方式比较好？[/quote]
还是没理解 。。。
一头小胖程序猿 2013-07-19
- 打赏
- 举报
找一本JS权威经典看一下，这些都是基础而已，要不放在<head>里面，要不就放在你的控件后面
freviner 2013-07-19
- 打赏
- 举报
试了一下把js放在外部文件就不会出现上述问题了，也就是说一般的话js用外连方式比较好？
freviner 2013-07-19
- 打赏
- 举报
谢谢啦，也就是说js这种脚本代码是逐行顺序加载的吧
街头小贩 2013-07-19
- 打赏
- 举报
因为代码是按从上自下执行的，当执行到
document.getElementById("demo")时，dom树中并没有demo元素，所有有错误提示
有两种解决方案，
1.把js放到外部文件中,因为首先建立dom树再连接外部文件
2.在dom准备好时再执行js,像jQuery的document.ready就是这个意思
KK3K2005 2013-07-19
- 打赏
- 举报
页面元素解析的顺序问题
document.getElementById("demo").onclick=function(){displayDate()};
执行这个代码的时候 会从当前已经解析的页面中 查找 id 是 demo 的dom
你的<button id="demo" 。。。 放在这个代码后面 那么页面中当然找不到这个dom
1。从这个 执行中 你要能正确理解页面元素加载次序和解析 对js代码的影响
2。你以后应该从类似问题的表现来 反推原因 大胆的去理解和假设
