无法在附加子项 (div) 上设置 null 的属性 innerHTML

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 页面完全加载后经过的秒数。但在此之前，我正在尝试创建一个 ID 为 text2 的 div 以将其添加到 div parent.This div 中应该显示单词 "seconds"取决于时间（秒变量为1时基本显示"second"，不为1时显示"seconds"）

其中 "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。

Am I correct to assume the div is not being added?

没有。添加了 div，但随后您在尝试对其进行任何操作之前将其销毁。

Answer 2

在您的 document.getElementById("canvas").innerHTML = seconds; 行中，您将替换 canvas 的完整 innterHTML。这样你的元素 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

您正在删除替换 canvas 的内部 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/

无法在附加子项 (div) 上设置 null 的属性 innerHTML

Cannot set property innerHTML of null on appended child (div)

html

javascript

css

jquery

appendchild

无法在附加子项 (div) 上设置 null 的 属性 innerHTML

Cannot set property innerHTML of null on appended child (div)

html

javascript

css

jquery

appendchild

无法在附加子项 (div) 上设置 null 的属性 innerHTML