無法讀取null的屬性“ id”-JS錯誤

Question

我有以下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。 這怎么可能？

Answer 1

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

Answer 2

您的JS代碼可能已在HTML完全呈現之前運行。 為避免這種情況，請在“ DOMContentLoaded”事件觸發之前運行您的代碼。

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

Answer 3

整個html正文不會出現任何錯誤后，請加載javascript

無法讀取null的屬性“ id”-JS錯誤

問題描述

3 個解決方案

解決方案1
3 已采納 2015-08-02 00:01:43

解決方案2
2 2015-08-02 00:03:14

解決方案3
0 2017-07-18 11:41:04

無法讀取null的屬性“ id”-JS錯誤

問題描述

3 個解決方案

解決方案1 3 已采納 2015-08-02 00:01:43

解決方案2 2 2015-08-02 00:03:14

解決方案3 0 2017-07-18 11:41:04

解決方案1
3 已采納 2015-08-02 00:01:43

解決方案2
2 2015-08-02 00:03:14

解決方案3
0 2017-07-18 11:41:04