通过点击事件监听器添加/移除类实现表单切换问题

你的代码未达到预期效果，核心有两个问题：

• 变量名拼写错误：将登录按钮的变量名写成了signIpButton，正确应为signInButton，导致登录按钮的事件监听完全未生效。
• 事件绑定错误：两个事件监听器都绑定在了注册按钮（signUpButton）上，点击注册按钮时会同时执行添加和移除类的操作，相当于类的状态没有变化。

修正后的代码如下：

// ACCOUNTS Overlay
const container = document.getElementById('container');
const signInButton = document.getElementById('signIn'); // 修正变量名拼写
const signUpButton = document.getElementById('signUp');

// 点击注册按钮，添加激活类
signUpButton.addEventListener('click', () => {
    container.classList.add('right-panel-active');
});

// 点击登录按钮，移除激活类
signInButton.addEventListener('click', () => { // 绑定到登录按钮
    container.classList.remove('right-panel-active');
});

关键修正说明 #

1. 修正变量名：将signIpButton改为signInButton，确保能正确获取登录按钮的DOM元素。
2. 拆分事件绑定：把添加类的逻辑绑定到注册按钮，移除类的逻辑绑定到登录按钮，点击对应按钮时执行正确的类切换操作。

配合CSS实现表单切换的示例（需根据你的实际DOM结构调整）：

/* 默认显示登录表单，隐藏注册表单 */
#container .signup-form {
    display: none;
}

/* 添加激活类后显示注册表单，隐藏登录表单 */
#container.right-panel-active .signup-form {
    display: block;
}
#container.right-panel-active .signin-form {
    display: none;
}

内容的提问来源于stack exchange，提问作者Showgo001