Why the value of document.getElementById("greeting") is null?

Question

<!-- This is the HTML element -->    
<h1 id="greeting"></h1>

JS

var currentUser = localStorage.getItem("currentUser");
document.getElementById("greeting").innerHTML = "Hi " + currentUser;

Here is what happens when inspect the page, it says:

Uncaught TypeError: Cannot set property 'innerHTML' of null(…)

This would be the entire code file.

//mypublicwebsites.tk/artem/databases/a/load_home.js
//This isn't the complete code because I cannot use 'localStorage' in a code snippet
//excluding unneeded code
var isSignedIn = true;
//The current user, lets just say that is me
var currentUser = "Sean";
if(isSignedIn) {
  load();
} else {
  window.location.replace("index.html");
}
function logOut () {
  localStorage.setItem("isSignedIn","false");
  localStorage.setItem("currentUser", "none");
  window.location.replace("index.html");
}
function load() {
  document.querySelector(".greeting").innerHTML = "Hi " + currentUser + "!";
}

<!DOCTYPE html>
<html>
<head>
<title>Artem Inc. | Database A -> Home</title>
<script src="mypublicwebsite.tk/artem/databases/a/load_home.js"></script>
</head>
<body>
<div id="menu">
<button onclick="logOut()">Log Out</button>
</div>
<h1 class="greeting"></h1>
</body>
</html>

It does seem to work in the snippet but not in the browser.

Fine, I'll post the answer I found. You need to wait for the webpage to load and then execute the script, so I put the script right before the closing body tag.

your javascript needs to be placed at the bottom of the `` tag, or else it needs to be executed after the page is loaded. — I wrestled a bear once., Nov 23 '16 at 17:40
@SeanHe: The error would suggest that the JavaScript is being executed before that element exists on the page. It would need to be executed after. — David, Nov 23 '16 at 17:41
or else, maybe you have more than one element with that id. id's should be unique. — I wrestled a bear once., Nov 23 '16 at 17:41
@Iwrestledabearonce.: In that case, it would fetch the first one found. — , Nov 23 '16 at 17:42
@squint: Most likely, but I doubt it's guaranteed. Since the markup would be invalid, I suspect the behavior would be undefined and potentially browser-specific. — David, Nov 23 '16 at 17:42
If you move your JS code to right before the closing body tag, does it work? — j08691, Nov 23 '16 at 17:44
@David: It's not actually invalid *markup*, though it's likely invalid in the DOM API spec. I'd be surprised though if that case was left as undefined behavior. — , Nov 23 '16 at 17:45
...I see DOM 1 has the behavior not defined. Checking the rest. ...same with DOM 2, and DOM3 — , Nov 23 '16 at 17:46
Squint, david is right. it's browser independant: https://www.w3.org/TR/DOM-Level-2-Core/core.html — I wrestled a bear once., Nov 23 '16 at 17:47
@Iwrestledabearonce.: The [current standard](https://dom.spec.whatwg.org/#dom-nonelementparentnode-getelementbyid) specifies that the first element in tree order should be returned. Before that, I'd say it falls into the common category of real-world behavior, much like `.innerHTML` was before it was officially spec'd and we all used it anyway. — , Nov 23 '16 at 17:50
@squint - cool! thanks for the info. for posterity, here is the actual spec: https://www.w3.org/TR/dom/ — I wrestled a bear once., Nov 23 '16 at 17:54
` Artem Inc. | Database A -> Home

` Here is the entire HTML code — mathmaniac88, Nov 23 '16 at 19:54
`var isSignedIn = localStorage.getItem("isSignedIn"); var currentUser = localStorage.getItem("currentUser"); console.log(currentUser); if(isSignedIn === "true") { if (currentUser === "Sean") { document.getElementById("greeting").innerHTML = "Hi" + currentUser; } } else { window.location.replace("index.html"); }` Here is the entire Javascript code — mathmaniac88, Nov 23 '16 at 19:57
Edit your question to add more information... but your script is at the top of the page, so it runs before the elements below it exist. — , Nov 23 '16 at 20:01
Note that the SO snippet mechanism automatically wraps the JS in an event handler for `DOMContentLoaded`. — , Nov 28 '16 at 05:02
Whoever said it was a duplicate is stupid. I have finally figured out the solution: just place the script tag right before the closing body tag. I figured out that when it returns null, the page is in a state where the element did not exist yet, so I execute the script once it's done loading. — mathmaniac88, Jan 14 '17 at 12:54
To get out the Q ban, you should do all possible to fix and improve your posts. If you have own-deleted questions, fix them as you only can, and then undelete them. If you have luck, you need just some ups/reopens to get out. — peterh, Jul 29 '18 at 22:53

Tommie · Answer 1 · 2016-11-28T09:29:31.250

-2

After checking your source over at Github i notice that there is no element of id greeting at https://github.com/codecademy123/codecademy123.github.io/blob/master/artem/databases/a/home.html :

<!DOCTYPE html>
<html>
<head>
<title>Artem Inc. | Database A -> Home</title>
<script src="load_home.js"></script>
</head>
<body>
<div id="menu">
<button onclick="logOut()">Log Out</button>
</div>
<h1 class="greeting"></h1>
</body>
</html>

No id but there is a class with the name greeting.

Here's an updated and simplified fiddle:
https://jsfiddle.net/tommiehansen/ndd0c7rh/2/

Basically we just use document.querySelector('.greeting') instead of document.getElementById('greeting') since the id greeting will always return undefined if it does not exist.

If you want to still use an id simply change the source code for home.html from <h1 class="greeting"></h1> to <h1 id="greeting"></h1>. The important part here is to query the DOM after what you've set the class or id to be. Because if you do not match these it will always return as undefined since your javascript will not be able to find the selector.

edited Nov 28 '16 at 09:29

answered Nov 23 '16 at 17:41

Tommie

765
6
15

that is pretty much what I did – mathmaniac88 Nov 23 '16 at 19:50
Yes, exactly and thus it should work. I don't completely understand your question and would have to see more of the actual code and possibly other things that get loaded etc. You need to define the environment a bit more and don't get stuck with specifics as with the other comment thread due to the fact that the thing your trying to to is very simple. – Tommie Nov 24 '16 at 08:44
And do explain the downvoting. This is an answer to a vague question where we do not have the full source and thus can only give an answer based on the available data. – Tommie Nov 24 '16 at 10:22
the `.innerHTML` property works in other javascript files though – mathmaniac88 Nov 28 '16 at 01:49
Here is the github page: https://github.com/codecademy123/codecademy123.github.io/tree/master/artem/databases/a – mathmaniac88 Nov 28 '16 at 04:20
If the question is unclear, then clarify it via comments. If you cannot reproduce the issue, then vote to close for that reason and/or leave a comment to that effect. – Nov 28 '16 at 04:59
Actually, non-unique IDs would **not** cause the reported problems. – Nov 28 '16 at 05:01
At the page you refer to at Github you have a `classname` but here you're talking about an `id`. Your problem seem to be about mismatching class and id selector only. Updated answer to reflect this. – Tommie Nov 28 '16 at 09:32

Why the value of document.getElementById("greeting") is null?

1 Answers1