innerHTML of null error

Question

Using console.log I am able to see value coming from another page, but when I am placing this value using document.getElementById('abc').innerHTML = xyz.age; it's giving me error of Uncaught TypeError: Cannot set property 'innerHTML' of null

My JS

xyz = JSON.parse(sessionStorage.getItem("details"));
document.getElementById('abc').innerHTML = xyz.age; //getting error from here
console.log(xyz.age);

Can you guyz help me out

Are you executing it after page load completes? If not, checkout [DOMContentLoaded](https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded) event. — Arup Rakshit, May 21 '18 at 18:59
The error means that there is no element in the DOM with an `id="abc"`. Try to do a `console.log(document.getElementbyId('abc')` and see if it returns anything. — Chase DeAnda, May 21 '18 at 19:00
@ChaseDeAnda You are not sure if your answer is correct or not? — Arup Rakshit, May 21 '18 at 19:42

Chase DeAnda · Answer 1 · 2018-05-21T19:07:42.480

1

This example works using your code, you might be executing the script before the dom has been fully loaded? Try wrapping your code in document.addEventListener("DOMContentLoaded"):

document.addEventListener("DOMContentLoaded", function() {
  // code...
});

document.addEventListener("DOMContentLoaded", function() {
  xyz = { age: 24 }; // Mock data from localstorage
  document.getElementById('abc').innerHTML = xyz.age;
  console.log(xyz.age);
});

<div id="abc"></div>

edited May 21 '18 at 19:07

answered May 21 '18 at 19:04

Chase DeAnda

13,160
2
26
39

1

Or, better yet, just move the `script` to just prior to the closing `body` tag. It's more efficient than registering an event handler. – Scott Marcus May 21 '18 at 19:05
@ScottMarcus agreed, no idea of OPs setup though. – Chase DeAnda May 21 '18 at 19:06

score -1 · Answer 2 · answered May 21 '18 at 19:04

The problem is not xyz, it's with document.getElementById('abc'). 'abc' cannot be found when your script is executing, either the element is not there, or the script is running before the document is ready.

If the latter, you may need to execute the script in a callback function after the document has been loaded. See https://www.w3schools.com/jsref/event_onload.asp

innerHTML of null error

2 Answers2