Как исправить «Uncaught TypeError: невозможно вызвать метод« appendChild »из null»

Question

Я пытаюсь захватить текст из текстовой области HTML и вызвать метод create() при нажатии кнопки «Отправить». Метод пытается использовать сообщение из текстовой области и отправляет его в свой собственный тег p с классом и помещает отметку даты в свой собственный тег p и свой собственный класс.

Они оба будут в комментариях div. Ошибка я получаю (с помощью инструментов разработчика в Chrome), является

Uncaught TypeError: Cannot call method 'appendChild' of null.

Это направлено на "cmt.appendChild (divTag);". Я очень новичок в Javascript, и это просто практика для меня, чтобы увеличить мои навыки. Вся помощь очень ценится!

var cmt = document.getElementById('comments'); 

function create() { 

    var username = 'User', 
     message = document.getElementById("textBox").value, 
     divTag = document.createElement('div'), 
     p1 = document.createElement('p'), 
     p2 = document.createElement('p'); 

    divTag.className = 'comment'; 

    p1.className = 'date'; 
    p1.innerHTML = new Date(); 
    divTag.appendChild(p1); 

    p2.className = 'message'; 
    p2.innerHTML = username + ': ' +message; 
    divTag.appendChild(p2); 

    cmt.appendChild(divTag); 
} 

Answer 1

Ошибка, которую вы получаете, предполагает, что на вашей странице нет элементов с идентификаторами «комментарии». document.getElementById вернет null, когда элемент с таким ID не найден, и таким образом cmd.appendChild(divTag) будет выполнен как null.appendChild(divTag).

Если вы уверены, что этот элемент существует, вы можете выполнить свой JavaScript, который присваивает переменную cmt, прежде чем этот элемент будет создан браузером. Чтобы этого избежать, стандартная практика заключается в размещении тега <script>, который включает ваш внешний JavaScript непосредственно перед закрытием </body> тег.

Если вы по какой-то причине не можете поместить свой тег скрипта, попробуйте запустить код, который назначает переменную $(document).ready() (jQuery) or equivalent.

Answer 2

Ваш код работает, если существуют необходимые элементы. Как вы можете видеть в this Fiddle.

Работает, если HTML похож на:

<div id="comments"> 
    <input id="textBox" type="textBox" value="Hello" /> 
</div> 

Я полагаю, что один из идентификаторов может быть опечатка или элемент, как вы ожидаете, что не существует.

Однако, если вы используете скрипт во внешнем файле, он может попытаться выполнить до того, как документ будет полностью загружен, поэтому ваш скрипт ссылается на элементы, а не , но готов к работе в DOM.

В jQuery вы бы обернули $(document).ready(function(){// your code here..}) вокруг.
Есть несколько подробностей о том, как это сделать только в JavaScript в этом сообщении SO: Documen Ready equivalent without jQuery.