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.

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

## 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.

```javascript:index.js
const el = null;

// ⛔️ Cannot read properties of null (reading 'className')
const clsName = el.className;
```

<InArticleAd />

**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.**

```javascript: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.

```html:index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    
    <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.**

```html:index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    
    <script src="index.js"></script>

    <div id="box" class="text-blue-400">Hello World</div>
  </body>
</html>
```

<InArticleAd />

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.

```javascript: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.

```html:index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div id="box" class="text-blue-400">Hello World</div>

    
    <script src="index.js"></script>
  </body>
</html>
```

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

```javascript: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.

<InArticleAd />

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

Solve - Cannot read property 'className' of Null #

Conclusion #

Borislav Hadzhiev

For more articles, navigate to myHome Page

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