Why my `
` is null?

Question

I don't understand why the following code return that terminalContainer is null:

var terminalContainer = document.getElementById('terminal-container');
console.log("terminalContainer:" + terminalContainer);

But in my HTML I defined it :

<li class="liContainer">
        <div>
            <h3>{{nameContainer}}</h3>
        </div>
        <div id="idContainer">
            <span>ID: {{idContainer}}</span>
        </div>
        <div id="stateContainer">
            <span class="state">State: {{stateContainer}}</span>
        </div>

        <div id="terminal-container"></div>
        <div class="terminal"></div>


          <button type="button" class="stop {{#if to_hide_stop}}hidden{{/if}}"> </button>
          <button type="button" class="start {{#if to_hide_start}}hidden{{/if}}"> </button>
          <button type="button" class="pause {{#if to_hide_pause}}hidden{{/if}}"></button>
          <button type="button" class="unpause {{#if to_hide_unpause}}hidden{{/if}}"> </button>
          <button type="button" class="cmdLogs"> </button>
    </li>

And the result on my app is that I have 4 <li> so the message "terminalContainer: null" appear 4 times in the console, that means my div exists right ?

What am I not understanding ?

Please show more code. It is not clear when, where or how the important piece of your code is being called. You might be calling a function instead of passing the function as an argument somewhere. — Anders Marzi Tornblad, Jan 17 '17 at 07:59
Works fine [here](https://jsfiddle.net/pfaoqb0x/). Is this all of your code? Do you have multiple `li` elements containing a div with *the same* id? — insertusernamehere, Jan 17 '17 at 07:59
Are you sure that your JS code is executed after the "terminal-container" element is available? — plvice, Jan 17 '17 at 08:01
That's why I hate Meteor, everytime I post something about a problem I don't know why but it works in JSFiddle... Yes it is because if I did it before it's executed I got 1 error only @plvice — Jerome, Jan 17 '17 at 08:02
@AndersTornblad & insertusernamehere - Even if he/she did, `getElementById` would return one of them (the first, in my experience, but of course it's not defined). — T.J. Crowder, Jan 17 '17 at 08:02

Soviut · Accepted Answer · 2017-01-17T08:07:20.887

1

This is most likely due to your script running before the page is loaded. Scripts in the <head> will run as soon as they're loaded which is often before the DOM has been properly created. The script will still execute, but it won't be able to find any elements since none of them exist yet.

The simplest way to solve this is to put your script tag at the end of your <body>, rather than in the head.

<body>
  ...
  <script src="myscript.js"></script>
</body>

There are other ways of postponing script execution until the page has loaded, but there are plenty of answers for how to do that on StackOverflow. This answer serves to explain why you're getting nulls.

edited Jan 17 '17 at 08:07

answered Jan 17 '17 at 08:00

Soviut

79,529
41
166
227

1

We don't need **yet another** answer to this question. – T.J. Crowder Jan 17 '17 at 08:03
1

Feel free to mark it as a duplicate. I was answering why it was coming up null which is a bit more ambiguous than "how do I postpone script execution until the page has loaded" – Soviut Jan 17 '17 at 08:04
No it's not because of the script loading because all the other part of the code works – Jerome Jan 17 '17 at 08:04
@Jerome: Lots of things could work with this still being the problem. `getElementById` isn't broken. If there's an element in your DOM with that ID as of when you run it, it **will** return that element to you. The only reason it returns `null` is if no such element is in the DOM at that time (the linked question's answers). That's the problem. Your job is to find out *why* there's no element with that ID in the DOM as of when you run it. – T.J. Crowder Jan 17 '17 at 08:06
@Jerome Perhaps you should update your question with more code then. Getting a `null` element won't halt the script from running. – Soviut Jan 17 '17 at 08:06
@T.J.Crowder Ok that's a nice answer now I'll invest on why there is no element in the DOM when I do my code ! – Jerome Jan 17 '17 at 08:07

Why my `
` is null?

1 Answers1

Linked

Why my `` is null?

1 Answers1

Linked

Why my `
` is null?