TypeError: Cannot Read Property ‘InnerHTML’ Of Null In JavaScript – How To Fix It?

TypeError: Cannot read property 'innerHTML' of Null in JavaScript

The TypeError: Cannot read property ‘innerHTML’ of Null in JavaScript is a standard error that you encounter during application development. This article will share the cause and how to fix this error. Read on it now.

The TypeError: Cannot read property ‘innerHTML’ of Null in JavaScript

The innerHTML() property sets or returns the HTML content (inner HTML) of an element.

Syntax:

  • Return the innerHTML property: element.innerHTML
  • Set the innerHTML property: element.innerHTML = text

Example:

<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
      <div id="root1">
        <h1>LearnShareIT</h1>
      </div>
      <div id="root2">
      </div>
      <script>
        // Returns the innerHTML property of the element with id 'root1'
        const rt1 = document.getElementById('root1');
        const result1 = rt1.innerHTML;
        
        // Set innerHTML property of element with id 'root2'
        const rt2 = document.getElementById("root2");
        const result2 = rt2.innerHTML = "LearnShareIT";
        
        console.log(result1);
        console.log(result2);
      </script>
   </body>
</html>

Output:

<h1>LearnShareIT</h1>
LearnShareIT

There are two reasons for the TypeError: Cannot read property ‘innerHTML’ of Null error to appear:

  • Using the innerHTML() method on a non-existent DOM element.
  • Insert <script> tag before declaring DOM elements.

Reason 1: Using the innerHTML() method on a non-existent DOM element

This is the most significant cause of the TypeError: Cannot read property ‘innerHTML’ error of Null. The following example describes this cause in detail.

Example:

<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
      <div id="root">
        <h1>LearnShareIT</h1>
      </div>
      <script src="script.js"></script>
   </body>
</html>
// Returns the innerHTML property of the element with id 'rt'
const rt = document.getElementById('rt');
const rt.innerHTML;

Output:

TypeError: Cannot read properties of null (reading 'innerHTML')

In the above code, I used the document.getElementById() method to call the element whose id is “rt”. But this element is not contained in the DOM. In other words, the DOM element I called does not exist.

In this case, to solve this error, you must ensure that the Dom element that you call to use the method innerHTML() exists and is contained in the DOM.

Code:

// Returns the innerHTML property of the element with id 'root'
const rt = document.getElementById('root');
const result = rt.innerHTML;

console.log(result);

Output:

<h1>LearnShareIT</h1>

Reason 2: Inserting script tag before declaring DOM elements

The TypeError: Cannot read property ‘innerHTML’ of Null also occurs when you insert script tags before declaring DOM elements.

Example:

<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
      <script src="script.js"></script>
      <div id="root">
        <h1>LearnShareIT</h1>
      </div>
   </body>
</html>
// Returns the innerHTML property of the element with id 'root'
const rt = document.getElementById('root');
const result = rt.innerHTML;

console.log(result);

Output:

TypeError: Cannot read properties of null (reading 'innerHTML')

Since I inserted the script tag before declaring the div element with the id “root”, the program will run the script.js file before this div element is declared and contained in the DOM.

To avoid this error, you must insert the script tag after declaring DOM elements.

Summary

This article has explained what causes the TypeError: Cannot read property ‘innerHTML’ of Null in JavaScript and how to solve it. I hope the information in this article will be helpful to you. Thanks for reading!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *