无法读取null的属性'id‘- JS错误
无法读取null的属性'id‘- JS错误
提问于 2015-08-02 08:00:15
我有以下html代码：
<!DOCTYPE html>
<html>
<head>
<script>
var array = ["one", "two", "three", "four"];
for(i = 0; i<array.length; i++){
alert(array[i]);
var tmp = document.getElementById(array[i]);
alert(tmp.id);
alert(tmp.innerHTML);
var to_append = tmp.innerHTML;
array_inc.push(to_append);
alert(array_inc);
console.log(array_inc);
}
</script>
</head>
<body>
<div id = "one">1</div>
<div id = "two">2</div>
<div id = "three">3</div>
<div id = "four">4</div>
</body>
</html>然而，在控制台中，当它到达第9行时，我收到了一个错误，它显示"type of null as not exist"，但很明显，div的id必须存在，因为我在主体中将其声明为id。这怎麽可能？
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-08-02 08:01:43
您的html元素不会在脚本加载时加载，因此在执行javascript时不存在。更改代码的顺序可以解决这个问题：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id = "one">1</div>
<div id = "two">2</div>
<div id = "three">3</div>
<div id = "four">4</div>
<script>
var array = ["one", "two", "three", "four"];
for(i = 0; i<array.length; i++){
alert(array[i]);
var tmp = document.getElementById(array[i]);
alert(tmp.id);
alert(tmp.innerHTML);
var to_append = tmp.innerHTML;
array_inc.push(to_append);
alert(array_inc);
console.log(array_inc);
}
</script>
</body>
</html>Stack Overflow用户
发布于 2015-08-02 08:03:15
在HTML完全呈现之前，您的JS代码可能正在运行。为了避免这种情况，在'DOMContentLoaded‘事件触发之前不要运行你的代码。
<script>
document.addEventListener("DOMContentLoaded", function(event) {
// your code here
});
</script>Stack Overflow用户
发布于 2017-07-18 19:41:05
请在整个html正文不会出现任何错误后加载javascript
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31767354
复制相关文章
相似问题
腾讯云开发者
