Javascript 无法读取null的属性“id”-JS错误_Javascript_Html

Javascript 无法读取null的属性“id”-JS错误

javascript html

Javascript 无法读取null的属性“id”-JS错误,javascript,html,Javascript,Html,我有以下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]);

我有以下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行时，我收到一个错误，它说null的类型不存在，但是很明显div的id必须存在，因为我在主体中声明了它作为id。这是怎么可能的？

在加载脚本时，您的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>

加载脚本时不会加载html元素，因此在执行javascript时不存在html元素。更改代码顺序将解决以下问题：

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

您的JS代码可能在HTML完全呈现之前运行。为了避免这种情况，在触发“DOMContentLoaded”事件之前不要运行代码

<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        // your code here
    });
</script>

您的JS代码可能在HTML完全呈现之前运行。为了避免这种情况，在触发“DOMContentLoaded”事件之前不要运行代码

<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        // your code here
    });
</script>

请在整个html正文不会出现任何错误后加载javascript

您从未初始化array_inc，可能您想写数组？您从未初始化array_inc，可能您想写数组？