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');Every Crazy Thing JavaScript Does
A captivating guide to the subtle caveats and lesser-known parts of JavaScript.
