Changing class using classlist.add not working

July 10, 2023

I wanted to change the name of the class ‘popup’ to ‘popup active’ when I click some button. The code isn’t working please help me out.

html:

<!DOCTYPE html>
<html>
<body>
    <script src="js.js"></script>
    <button class="button">click me</button>
    <div class="popup"></div>
</body>
</html>

js.js:

const but = document.querySelector('.button');
const pop = document.querySelector('.popup');

but.onclick = () => {
    pop.classList.add('active');
}

>Solution :

Your script is executed before your DOM is built, place it after your elements:

<!DOCTYPE html>
<html>
<body>
    <button class="button">click me</button>
    <div class="popup"></div>
    <script src="js.js"></script>
</body>
</html>

Or defer it:

<!DOCTYPE html>
<html>
<body>
    <script defer src="js.js"></script>
    <button class="button">click me</button>
    <div class="popup"></div>
</body>
</html>

You could also watch for your DOM being loaded without changing your HTML:


window.addEventListener('DOMContentLoaded', () => {
const but = document.querySelector('.button');
const pop = document.querySelector('.popup');

but.onclick = () => {
    pop.classList.add('active');
}

});