Javascript 无法在附加的子项（div）上设置null的innerHTML属性

在学习Unity之前，我希望能够根据自己的知识创建一个简单的Javascript游戏。所以，我开始用计时器做实验，它成功了。然后，我想在HTML文档中添加一个div元素，并根据计时器更改其文本。所以我写了这段代码：

var计数器=0；
var秒=0；
$（文档）.ready（函数（e）{
var元素=document.createElement（“div”）；
element.id=“text2”；
document.getElementById（“canvas”）.appendChild（元素）；
函数gameActions（）{
document.getElementById（“canvas”）.innerHTML=seconds；
如果（秒==1）document.getElementById（“text2”）.innerHTML=“秒”；
else document.getElementById（“text2”）.innerHTML=“seconds”；
计数器++；
如果（计数器%50==0）{
秒++；
}
}
设置间隔（游戏动作，20）；
});

此代码：

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

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

…将您试图瞄准的元素放入画布div中

此代码：

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

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

…销毁该元素中的所有内容并将其替换为
seconds
变量中的HTML

假设没有添加div，对吗

不可以。添加了div，但在尝试对其执行任何操作之前，请先将其销毁。
在您的行
文档中。getElementById（“canvas”）.innerHTML=seconds
您正在替换
画布的完整内部HTML。此时，您的元素
text2
再次被删除

如果要在自己的元素中独立于秒显示单位，则应创建一个元素
unit
，例如：


var计数器=0；
var秒=0；
$（文档）.ready（函数（e）{
var元素=document.createElement（“div”）；
var unit=document.createElement（“div”）；//创建第二个元素单元
element.id=“text2”；
unit.id=“unit”；//指定id单位
document.getElementById（“canvas”）.appendChild（元素）；
document.getElementById（“画布”）.appendChild（单位）；
函数gameActions（）{
document.getElementById（“unit”）.innerHTML=seconds；//将该单位替换为seconds的值
如果（秒==1）document.getElementById（“text2”）.innerHTML=“秒”；
else document.getElementById（“text2”）.innerHTML=“seconds”；
计数器++；
如果（计数器%50==0）{
秒++；
}
}
设置间隔（游戏动作，20）；
});
替换画布的内部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);
    });
})();

你能把这个问题用小提琴再现一下吗？哇，真的吗？太疯狂了！有没有办法让文本和我的div一起使用？我应该尝试在div之前添加文本吗？在创建text2的同时，在其中放置一个元素来保存秒数，然后更新该元素的innerHTML可能是最简单的方法。那么，我想如果我有一个容器div，除了在其中创建元素外，我不应该直接处理它。我总是忘记innerHTML不是setText！