Mi estado inicial muestra mi página de inicio de sesión, con <div class="needAccount">Need an account? Sign up here</div> punto. La página de registro está oculta, usando:

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

CSS:

 .active{ display: block; } .inactive{ display: none; }

Todo eso funciona, pero tan pronto como trato de hacer un evento para que al hacer clic en la cuenta necesaria oculte la página de inicio de sesión y muestre la página de registro, oculta la página de inicio de sesión pero no muestra la página de registro:

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

(También probé signup.classList.remove("inactive") e intenté usar ambos estados a la vez). Hice este tipo de secuencia de comandos antes en una página html diferente y funcionó perfectamente bien, pero no puedo entender por qué no funciona aquí. ¿Hay algún tipo de regla al respecto?

(ps. Me gustaría seguir con este estilo si es posible, ya que quiero practicar los controladores de eventos y las listas de clases, supongo que sería más eficiente vincularlo a una nueva página html)