Невозможно установить свойство innerHTML нулевого значения на дочерний дочерний элемент (div)

Question

Прежде чем я узнаю какое-то единство, я захотел создать простую игру Javascript из своих собственных знаний. Итак, я начал экспериментировать с таймером, и это сработало. Затем я хотел добавить элемент div в свой HTML-документ и изменить его текст в ответ на таймер. Так что я написал этот код:

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>

В основном я намеревающийся изменить текст «родительского» DIV, который отображает количество секунд, прошедших после того, как страница HTML загружена полностью. Но до этого я пытаюсь создать div с id text2, чтобы добавить его в родительский div. Этот 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); 

... помещает элемент, который вы пытаетесь предназначаться внутри холста дел.

Этот код:

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

... разрушает все в этом элементе и заменяет его HTML в переменной seconds.

Правильно ли считать, что div не добавляется?

Нет. Добавляется div, но затем вы уничтожаете его, прежде чем пытаться что-либо сделать с ним.

Answer 2

В вашей строке document.getElementById("canvas").innerHTML = seconds; вы заменяете полный intterHTML canvas. При этом ваш элемент 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/