3

I am attempting to grab text from a HTML text area, and call the create() method when a 'Submit' button is pressed. The method is trying to use the message from the text area, and post that to its own p tag with class, and post a date stamp in its own p tag, and its own class.

These will both be in the div 'comments'. The error I am getting (using developer tools in Chrome), is

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

This is aimed at "cmt.appendChild(divTag);". I am very new to Javascript, and this is just practise 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);
}
fresskoma
  • 24,302
  • 9
  • 79
  • 122
Fizzix
  • 20,849
  • 34
  • 100
  • 160

3 Answers3

6

The error you are getting suggests that there is no element with the ID "comments" on your page. document.getElementById will return null when no element with such an ID is found, and thus cmd.appendChild(divTag) will be executed as null.appendChild(divTag).

If you are certain that the element exists, you may be executing your JavaScript that assigns the cmt variable before that element is created by the browser. To prevent that, standard practice is to place the <script> tag which includes your external JavaScript just before the closing </body> tag.

If you can't move your script tag for some reason, try running the code that assigns the variable with $(document).ready() (jQuery) or equivalent.

Community
  • 1
  • 1
fresskoma
  • 24,302
  • 9
  • 79
  • 122
  • This Javascript is external to my HTML page. I definitely have a div in my HTML with the ID of 'comments'. Although, the div is completely empty and is waiting for this text to be placed within it. – Fizzix Feb 18 '13 at 22:30
  • Thanks mate, added my code AFTER my div was being created, and worked perfectly. Thanks everyone for your help, was of great assistance to me! :) – Fizzix Feb 18 '13 at 22:38
  • +1, now I know what else might work if jQuery is not an option. Nice. – Nope Feb 18 '13 at 22:39
  • 1
    Placing the script before the `

    ` should be seen as a standard practice, not the alternative.

     – the system Feb 18 '13 at 23:25
  • 1
    @thesystem You are correct. It was very unfortunately worded since (for some reason) I had the

    idea last... :( Changed it, though :)

     – fresskoma Feb 19 '13 at 08:03
1

Your code works if the required elements exist. As you can see in this Fiddle.

Works if HTML is similar to:

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

My guess is that one of the identifiers might be misspelled or the element as you expect it does not exist.

However, if you are running the script in an external file it might try to execute before the document is fully loaded, hence your script is referring to elements not yet ready in the DOM.

In jQuery you would wrap a $(document).ready(function(){// your code here..}) around.
There is some details on how to do this in just JavaScript in this SO post: Documen Ready equivalent without jQuery.

Community
  • 1
  • 1
Nope
  • 21,584
  • 7
  • 42
  • 72
  • It's so odd, since I have also tested this is Fiddle and it worked perfectly. I do have a div with the ID of 'comments' in my HTML document. My HTML document is linking to my Javascript document in the head (obviously), and my div with the ID of 'comments' is being called near the end of my HTML document. Would this have anything to do with it? – Fizzix Feb 18 '13 at 22:35
  • @JadeMulholland: Without jQuery I think it is trickier as you can see on the linked example. Have a go at what [**x3ro**](http://stackoverflow.com/users/124257/x3ro) suggested regarding the ` – Nope Feb 18 '13 at 22:38
  • 1
    Will do, will definitely have to try and start adding some jQuery in to save myself alot of messing around. Thanks! – Fizzix Feb 18 '13 at 22:51
1

Actually, his code is fine. Its just that JavaScript runs BEFORE HTML. A simple fix is to nest all of your code inside of a function with any name. Then use window.onload to run the function after the HTML is loaded. so basically:

window.onload = function any_name()
{
//code to be executed
}

This is useful especially if you do not want to move your script tag. I generally like to leave the tag where it is.

Brendan
  • 1,118
  • 11
  • 17