无法在附加子项（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/