My initial state shows my log in page, with a <div class="needAccount">Need an account? Sign up here</div>point. The sign up page is hidden, using:

const signup = document.querySelector(".signup");
signup.classList.add("inactive");

css:

.active{
    display: block;
}

.inactive{
    display: none;
}

That all works, but as soon as I try to make an event so that when clicking the need account it hides the log in page and shows the signup page, it does hide the login page but wont show the signup page:

const login = document.querySelector(".login");   

needAccount.addEventListener("click", (e) =>{
        login.classList.add("inactive");
        signup.classList.add("active")
    })

(I've also tried signup.classList.remove("inactive"), and tried using both states at once). I did this kind of script before on a different html page and it worked perfectly fine, but I can't figure out why it isn't working here. Is there some kind of rule to it?

(ps. I would like to stick with this style if possible as I want to practice event handlers and classlists, I'm guessing it would just be more efficient to make it link to a new html page)