無法在附加子項（div）上將屬性innerHTML設置為null

Question

在學習Unity之前，我希望能夠根據自己的知識創建一個簡單的Javascript游戲。 因此，我開始嘗試使用計時器，它開始起作用。 然后，我想向我的HTML文檔中添加一個div元素，並更改其文本以響應計時器。 所以我寫了這段代碼：

 var counter = 0; var seconds = 0; $(document).ready(function(e) { var element = document.createElement("div"); element.id = "text2"; document.getElementById("canvas").appendChild(element); function gameActions() { document.getElementById("canvas").innerHTML = seconds; if (seconds == 1) document.getElementById("text2").innerHTML = "second"; else document.getElementById("text2").innerHTML = "seconds"; counter++; if (counter % 50 == 0) { seconds++; } } setInterval(gameActions, 20); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="canvas" class="imgcenter" style="width: 500px; height: 400px; background-color: #eeffee;"> </div> 

基本上，我打算更改“ parent” div的文本，該文本顯示html頁面完全加載后經過的秒數。 但在此之前，我試圖創建一個div ID為text2添加的div parent.This DIV中應顯示“秒”字取決於時間（基本上顯示為“第二”，當秒變量為1，如果不是，則為“秒”）

其中“ imgcenter”僅是用於指定自動頁邊距的CSS。 錯誤是，每當我在Chrome上運行此命令時，都會得到：

Uncaught TypeError: Cannot set property 'innerHTML' of null

我是否正確假設未添加div？ 我在添加中缺少步驟了嗎？ 請讓我知道您認為錯誤是什么，謝謝

Answer 1

這段代碼：

var element = document.createElement("div");
element.id = "text2";
document.getElementById("canvas").appendChild(element);

…將您要定位的元素放在canvas div中。

這段代碼：

    document.getElementById("canvas").innerHTML = seconds;

… 銷毀該元素中的所有內容，並用seconds變量中的HTML替換它。

我是否正確假設未添加div？

不會。div已添加，但是您在嘗試對其進行任何操作之前先將其銷毀。

Answer 2

在您的行document.getElementById("canvas").innerHTML = seconds; 您將替換canvas的完整intterHTML。 這樣，您的元素text2再次被刪除。

如果要獨立於秒在其自己的元素中顯示單位，則應創建一個像這樣的元素unit ：

 var counter = 0; var seconds = 0; $(document).ready(function (e) { var element = document.createElement("div"); var unit = document.createElement("div"); // create a second element unit element.id = "text2"; unit.id = "unit"; // asign the id unit document.getElementById("canvas").appendChild(element); document.getElementById("canvas").appendChild(unit); function gameActions() { document.getElementById("unit").innerHTML = seconds; // replace the unit with the valuen of seconds if (seconds == 1) document.getElementById("text2").innerHTML = "second"; else document.getElementById("text2").innerHTML = "seconds"; counter++; if(counter % 50 == 0) { seconds++; } } setInterval(gameActions, 20); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="canvas" class="imgcenter" style="width: 500px; height: 400px; background-color: #eeffee;"> </div> 

Answer 3

您將刪除替換畫布內部HTML時添加的元素。 如果只用整個字符串更新整個內容，而不是創建一個單獨的元素，那會更好。 我還將其包裝在IIFE中，以使變量不會泄漏到全局范圍中。

(function () {
    var counter = 0;
    var seconds = 0;

    var canvas = document.getElementById("canvas");

    function gameActions() {
        canvas.innerHTML = seconds + " second" + (seconds > 1 ? "s" : "");

        counter++;

        if (counter % 50 == 0) {
            seconds++;
        }

    }

    $(function() {
        setInterval(gameActions, 20);
    });
})();

http://jsfiddle.net/1unn153b/