Solve - Cannot read property 'className' of Null in JS

avatar

Borislav Hadzhiev

Sat Oct 23 20212 min read

banner

Photo by Caleb Fisher

Solve - Cannot read property 'className' of Null #

The "Cannot read property 'className' of null" error occurs for 2 reasons:

  1. Accessing the className property on a null value - a DOM element that doesn't exist.
  2. Inserting the JS script tag above the HTML where the DOM elements are created.
index.js
const el = null; // โ›”๏ธ Cannot read properties of null (reading 'className') const clsName = el.className;

To solve the "Cannot read property 'className' of null" error, make sure you're using the correct id when getting the DOM element. The error often occurs when an invalid id is provided to the getElementById method.

index.js
const el = document.getElementById('does-not-exist'); console.log(el); // ๐Ÿ‘‰๏ธ null // โ›”๏ธ Cannot read properties of null (reading 'className') console.log(el.className);

We passed an id that doesn't exist to the getElementById method, so we got a null value back. Accessing the className property on a null value causes the error.

The id should match between your js and html code.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <!-- ๐Ÿ‘‡๏ธ id is `box` --> <div id="box" class="text-blue-400">Hello World</div> <script src="index.js"></script> </body> </html>

To solve the "Cannot read property 'className' of null" error, place the JS script tag at the bottom of the body tag. The script should be ran after the DOM elements are created.

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" class="text-blue-400">Hello World</div> </body> </html>

The JS script is executed before the DOM element is created. This means that the div element will not be accessible in the index.js file.

index.js
const el = document.getElementById('box'); console.log(el); // ๐Ÿ‘‰๏ธ null // โ›”๏ธ Cannot read properties of null (reading 'className') console.log(el.className);

Instead, you should place the script at the bottom of the body tag, after the DOM elements that the script tries to access.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div id="box" class="text-blue-400">Hello World</div> <!-- โœ… GOOD - div is already created โœ… --> <script src="index.js"></script> </body> </html>

Now the div element is accessible inside of the index.js file.

index.js
const el = document.getElementById('box'); console.log(el); // ๐Ÿ‘‰๏ธ div#box console.log(el.className); // ๐Ÿ‘‰๏ธ "text-blue-400"

Conclusion #

The "Cannot read property 'className' of null" error occurs when accessing the classList property on a variable that stores a null value.

To solve the error, make sure to only access the classList property on valid DOM elements.

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