-1

我有这段代码。它收到错误 document.getElementById('foo') 为空。请帮助解决这个问题。

<script>
function doMove() {
    var foo=document.getElementById('foo');
    foo.style.left = (foo.style.left+10)+'px'; // pseudo-property code: Move right by 10px
    setTimeout(doMove(),20); // call doMove() in 20 msec
}
doMove();
</script>

</head>
<body>
<div id="foo" style="width:10px;">a</div>
</body>
</html>
4

5 回答 5

7

那是因为执行脚本时对象还不存在。

最简单的解决方案是将脚本移动到正文的末尾。

另一种解决方案是等待 DOM 被加载：

window.addEventListener('load', doMove);
于 2013-02-28T08:41:41.443 回答
0

运行脚本时该元素尚不存在。您的问题的一个简单解决方案是将调用从脚本中移至 doMove 并将其称为 onload 用于 body 标记，如下所示：

<body onload="doMove()">

或者简单地将脚本移动到 id 为 'foo' 的 div 下方。

如果支持旧版本的 IE (pre IE9) 'addEventListener' 是一个替代方案。用以下代码段替换您对 doMove 的调用：

window.addEventListener('load', doMove);
于 2013-02-28T08:46:50.883 回答
0

我已经改变了我的代码并写了这个。它现在正在读取 document.getElementById('foo')。我想每 20 毫秒移动一次我的 div 元素，因为我使用了 setTimeout() 但它什么也没做。

<body>
<div id="foo" style="width:10px;">a</div>
<script language="javascript">
function doMove() {
var foo=document.getElementById('foo');
     foo.style.left = parseInt(foo.style.left)+10+'px'; // pseudo-property code: Move right by 10px
     setTimeout(doMove,20); // call doMove() in 20 msec
    }
    doMove();
</script>
</body>
</html>
于 2013-02-28T08:53:18.587 回答
0

将代码粘贴到正文关闭标记之前的底部。

于 2013-02-28T08:42:24.460 回答
0

尝试将脚本放在文档正文的末尾。

像这样：

<body>
<div id="foo" style="width:10px;">a</div>
<script>
function doMove() {
var foo=document.getElementById('foo');
     foo.style.left = (foo.style.left+10)+'px'; // pseudo-property code: Move right by 10px
     setTimeout(doMove(),20); // call doMove() in 20 msec
    }
    doMove();
</script>
</body>
于 2013-02-28T08:42:39.900 回答