How to easily fix the "Cannot read property 'classList' of null" error in JavaScript

Tari Ibaba
Last updated on October 30, 2023
How to easily fix the "Cannot read property 'classList' of null" error in JavaScript

The "Cannot read property 'classList' of null" error happens in JavaScript when you try to access the classList property on an element that isn't in the HTML DOM.

Let's look at various ways to quickly fix this error.

Fix: Ensure correct selector

To fix the "Cannot read property 'classList' of null" error in JavaScript, ensure the correct selector accesses an existing HTML element.

<div>Welcome to Coding Beauty</div>
<button class="btn-1">Be amazing</button>

Check for any mistakes in the selector symbols in the script. Check for any mistakes in the ID or class name in the HTML tag. Maybe you forgot to set that id or class attribute at all? 

// forgot the '.' symbol used for class selectors 
const button = document.querySelector('btn-1');

console.log(button); // 👉️ undefined

// ❌ Uncaught TypeError: Cannot read properties of undefined (reading 'classList')
button.classList.add('active');

Fix: Ensure DOM load before .classList access

The "Cannot read property 'classList' of undefined" error also occurs when you try to access .classList on an element that the browser hasn't added to the DOM yet.

Maybe because your <script> is in the <head> tag and executes before the element's parsing:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Coding Beauty Tutorial</title>
    <!-- ❌ Script is run before button is declared -->
    <script src="index.js"></script>
  </head>
  <body>
    <div id="element">
      console.log('Easy answers to your coding questions and more...');
    </div>
  </body>
</html>

The script tag is placed in the <head> tag above where the div is declared, so index.js can't access the div.

const element = document.querySelector('.element');
console.log(element); // 👉️ undefined

// ❌ Uncaught TypeError: Cannot read properties of undefined (reading 'classList')
element.classList.add('highlight');

Solution: Move script to bottom

To fix the error in this case, move the script tag to the bottom of the body, after all the HTML elements have been declared.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Coding Beauty Tutorial</title>
    
  </head>
  <body>
    <div id="element">
      console.log('Easy answers to your coding questions and more...');
    </div>
    
    <!-- ❌ Script is run after element is added to the DOM -->
    <script src="index.js"></script>
  </body>
</html>

Now index.js will have access to the div and all the other HTML elements, because the browser would have rendered them by the time the script runs:

const element = document.querySelector('.element');
console.log(element); // 👉️ undefined

// ✅ Works as expected
element.classList.add('highlight');

Solution: Access .classList in DOMContentLoaded event listener

Another way to fix the "cannot read property 'addEventListener' of null" error is to add a DOMContentLoaded event listener to the document and access the element in this listener.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Coding Beauty Tutorial</title>
    <!-- Script placed above accessed element -->
    <script src="index.js"></script>
  </head>
  <body>
    <div id="element">
      console.log('Coding is more than a means to an end...');
    </div>
  </body>
</html>

The DOMContentLoaded event fires when the browser fully parses the HTML, whether or not external resources like images and stylesheets have loaded.

So regardless of where we place the script, the code in the listener only runs after every element is active in the DOM.

const element = document.querySelector('.element');
console.log(element); // 👉️ undefined

// ✅ Works as expected
element.classList.add('highlight');
Coding Beauty Assistant logo

Try Coding Beauty AI Assistant for VS Code

Meet the new intelligent assistant: tailored to optimize your work efficiency with lightning-fast code completions, intuitive AI chat + web search, reliable human expert help, and more.

See also