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

表单元素点击事件改到script标签中就不能执行？？

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var num=0;
// numCount();
function numCount(){
 document.getElementById('txt').value=num;
 num=num+1;
 setTimeout("numCount()",1000);
 }
</script>
</head>
<body>
<form>
<input type="text" id="txt" />
<input type="button" value="Start" onclick="numCount()" />
</form>
</body>
</html>

为什么我把onclick="numCount()"删除，然后在script标签中加上numCount()就报错，

提示cannot set property 'value' of null

临风流烟

2016-11-02

源自：JavaScript进阶篇 8-5

关注问题我要回答

1476

操作

收起

1 回答

stone310
2016-11-02

因为页面加载顺序从上到下，当执行numCount函数，加载到document.getElementById('txt').value=num这一句时，body里面的代码还未获取，因此会报错，只要将整个<script>标签放到</body>上方即可，

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form>
<input type="text" id="txt" />
<input type="button" value="Start"  />   <!--删除了onclick="numCount()"-->
</form>
<script type="text/javascript">
var num=0;
 numCount();                            //页面加载时立刻执行numCount()
function numCount(){
 document.getElementById('txt').value=num;
 num=num+1;
 setTimeout("numCount()",1000);
 }
</script>
</body>
</html>