How to fix "Uncaught TypeError: Cannot call appendChild method of null"
I am trying to grab text from an HTML textarea and call the create () method when the submit button is clicked. The method tries to use the message from the textarea and posts it in its own p tag with a class and puts the date stamp in its own p tag and its own class.
They will both be in the comment div. The error I am getting (using developer tools in Chrome) is
Uncaught TypeError: Unable to call method 'appendChild' of null.
This targets "cmt.appendChild (divTag);". I am very new to Javascript and it is just practice for me to increase my skills. All help is greatly appreciated!
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);
}
source to share
The error you received assumes that there are no elements with the IDs "comments" on your page. document.getElementById
will return null
when no element with that id is found, and thus cmd.appendChild(divTag)
will execute as null.appendChild(divTag)
.
If you are sure that this element exists, you can execute your JavaScript that assigns the variable cmt
before this element is created by the browser . To avoid this, it is standard practice to place a tag <script>
that includes your external JavaScript just before the closing tag</body>
.
If you are unable to put the script tag for some reason, try running code that assigns a variable $(document).ready()
(jQuery) or equivalent .
source to share
Your code works if the required elements exist. As you can see in this script .
Works if the HTML looks like:
<div id="comments">
<input id="textBox" type="textBox" value="Hello" />
</div>
I am guessing that one of the identifiers may be misspelled or the element, as you expect, does not exist.
However, if you are using a script in an external file, it might try to execute before the document is fully loaded, so your script is referencing elements still ready in the DOM.
In jQuery, you wrap $(document).ready(function(){// your code here..})
around.
There are some details on how to do it only in JavaScript in this SO post: Documen Ready Equivalent Without jQuery .
source to share
Actually, his code is fine. It's just that JavaScript runs before HTML. An easy fix is to paste all your code inside a function with whatever name you want. Then use window.onload to run the function after the HTML has loaded. so basically:
window.onload = function any_name()
{
//code to be executed
}
This is useful especially if you don't want to move the script tag. I usually like to leave the tag where it is.
source to share