                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

为什么这个代码直接调用不能显示在文本框里？

<!DOCTYPE HTML>

<html>

<head>

function clock(){

var time=new Date();

document.getElementById("clock").value = time;

}

clock();

</script>

</head>

<body>

<form>

</form>

</body>

</html

一失手成千古恨

2016-03-11

源自：JavaScript进阶篇 8-4

关注问题我要回答

720

操作

收起

4 回答

钰与宸回答被采纳 +3 积分
2016-03-18

按你写的代码，会先执行<script>里的函数clock()，再加载页面（即id为clock的文本框）。所以当你调用clock()函数，执行“document.getElementById("clock").value = time;”，是还没有id=clock这个文本框的，所以就不能搜索到它，并给它赋值了。如果你把<script>整段写在“<input type="text" id="clock" size="50" />”后面，就会发现，是可以调用的。

再来说为什么同样写在<head>的里的js，setInterval(clock,1000)就可以完成调用。因为setInterval()是window对象的方法，本身定义就是【加载页面后】每隔指定时间执行代码，所以用它的时候，它会在页面加载完，即先有文本框，再调用clock()，所以“document.getElementById("clock").value = time;”这句就有了意义，就能执行了。