[SOLVED] Adding and removing a class by using a click event listener

Adding and removing a class by using a click event listener

I am making an overlay using CSS but need an onclick event to change the content of the class.

I made a sign Up form to be under the sign in form. At the click of the sign Up, the sign Up form class should be added to the container while also at the click of the sign in button, I want the sign Up form to be removed and the sign In id to replace the container.

I have tried using JavaScript to create a variable for the container, sign Up and sign In unique id to select their respective area in the DOM. I also made event listeners to add and remove the class that won't display at first (since the sign in form would display first, that would mean that it'll be the sign up form that would need to be added and removed).

BELOW IS THE CODE I ATTEMPTED.

// ACCOUNTS Overlay
const container = document.getElementById('container');
const signIpButton = document.getElementById('signIn');
const signUpButton = document.getElementById('signUp');

    // Add the classname to container
signUpButton.addEventListener('click', () => 
    container.classList.add('right-panel-active')
);

    // Remove the classname from container
signUpButton.addEventListener('click', () => 
    container.classList.remove('right-panel-active')
);

Solution

Use toggle(), otherwise you add and immediately remove the class.


signUpButton.addEventListener('click', () => 
    container.classList.toggle('right-panel-active')
);