使用单击事件监听器添加和删除类

Question

我正在使用 CSS 制作叠加层，但需要一个 onclick 事件来更改类的内容。

我在登录表单下制作了一个注册表单。单击“注册”时，应将注册表单类添加到容器中，同时单击“登录”按钮时，我希望删除注册表单并使用登录 id 来替换容器。

我尝试使用 JavaScript 为容器创建一个变量，注册并登录唯一 id 以在 DOM 中选择各自的区域。我还创建了事件侦听器来添加和删除最初不会显示的类（因为登录表单将首先显示，这意味着它将是需要添加和删除的注册表单）。

下面是我尝试的代码。

// 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')
);

Answer 1

使用

toggle()

：

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