TypeError: Cannot read property 'className' of Null in JS

TypeError: Cannot read property 'className' of Null in JS #

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

Accessing the className property on a null value - a DOM element that doesn't exist.
Inserting the JS script tag above the HTML where the DOM elements are created.

cannot read property classname of null

Here is an example of how the error occurs.

index.js

Copied!
const el = null;

// ⛔️ Uncaught TypeError: 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

Copied!
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

Copied!
<!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

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

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

index.js

Copied!
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

Copied!
<!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

Copied!
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.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

TypeError: Cannot read property 'className' of Null in JS

TypeError: Cannot read property 'className' of Null in JS #

Conclusion #

Borislav Hadzhiev