Cannot set property 'textContent' of Null in JavaScript

avatar

Borislav Hadzhiev

Last updated: Aug 18, 2022

banner

Photo from Unsplash

Cannot set property 'textContent' of Null in JavaScript #

The "Cannot set property 'textContent' of null" error occurs for 2 reasons:

  1. Setting the textContent property on a null value (DOM element that doesn't exist).
  2. Inserting the JS script tag above the HTML where the DOM elements are declared.

cannot set property textcontent of null

Here's an example of how the error occurs.

index.js
const element = null; // ⛔️ Uncaught TypeError: Cannot set properties of null (setting 'textContent') element.textContent = 'some content';

To solve the "Cannot set property 'textContent' of null" error, make sure that the DOM element you're setting the textContent property on exists. The error most commonly occurs if you use the getElementById() method and pass it an id that is not present in the DOM.

index.js
const element = document.getElementById('does-not-exist'); console.log(element); // 👉️ null // ⛔️ Cannot set properties of null (setting 'textContent') element.textContent = 'some content';

An element with the provided id doesn't exist, so the getElementById method returns a null value.

When we try to set the textContent property on a null value, the error occurs.

Another common reason for getting the error is placing the JS script tag above the code that declares the DOM elements.

To solve the "Cannot set property 'textContent' of null" error, make sure that the JS script tag is placed at the bottom of the body, after the HTML elements have been declared.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <!-- ⛔️ BAD - script is run before div is created ⛔️ --> <script src="index.js"></script> <div id="box">Old content</div> </body> </html>

The JS script tag is added above the code that creates the div element. The index.js file is run before the div element exists. This means that we can't access the div from the index.js file.

index.js
const element = document.getElementById('box'); console.log(element); // 👉️ null // ⛔️ Cannot set properties of null (setting 'textContent') element.textContent = 'New content';

The JS script tag has to be placed below the DOM elements it needs access to.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div id="box">Old content</div> <!-- ✅ GOOD - div already exists ✅ --> <script src="index.js"></script> </body> </html>

Now, the div element can be accessed from the index.js file.

index.js
const element = document.getElementById('box'); console.log(element); // 👉️ div#box // ✅ Works element.textContent = 'New content';

Conclusion #

The "Cannot set property 'textContent' of null" error occurs when:

  • trying to set the textContent property on a null value (a DOM element that doesn't exist)
  • inserting the JS script tag above the code that declares the DOM elements

Further Reading #

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.