Question

我有这段代码。它得到一个错误document.getElementById（'foo'）为null。请帮助解决这个问题。

<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>

Answer 1

这是因为执行脚本时该对象尚不存在。

最简单的解决方案是在身体末端移动脚本。

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

window.addEventListener('load', doMove);

Answer 2

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

Answer 3

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

像这样：

<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>

Answer 4

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

<body onload="doMove()">

或者只需将脚本移动到id为'foo'的div下面。

如果支持旧版本的IE（IE9之前版）'addEventListener'是另一种选择。用此代码段替换您对doMove的调用：

window.addEventListener('load', doMove);

Answer 5

我已经更改了我的代码并写了这个。现在正在阅读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>

document.getElementById（）为null

5 个答案: