Solve - Cannot set property 'textContent' of Null in JS

avatar

Borislav Hadzhiev

Tue Oct 19 20212 min read

banner

Photo by Leslie Cross

Solve - Cannot set property 'textContent' of Null #

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; // โ›”๏ธ 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';

Because an element with the provided id does not exist, 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 ran 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 ran 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 moved 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 before the DOM elements have been declared

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee