Question

如果单击登录和注册按钮，我正尝试切换注册和登录框的可见性。我试图只使用纯JavaScript。

我写了简单的html和javascript，如下所示：

<div>
    <button class="signin">sign in</button><button class="signup">sign up</button>

    <div class="signin-box" style="display: none;">
        <form class="signin-form">
            <label>username<input></label><label>password<input></label><button type="submit">signin</button>
        </form>
    </div>

    <div class="signup-box" style="display: none;">
        <form class="signup-form">
            <label>username<input></label><label>password<input></label><button type="submit">signup</button>
        </form>
    </div>
</div>

javascript部分：

var signupButton = document.getElementsByClassName('signup')[0];
var signinButton = document.getElementsByClassName('signin')[0];
var signupBox = document.getElementsByClassName('signup-box')[0];
var signipBox = document.getElementsByClassName('signin-box')[0];

console.log("box: ", signupBox, "button: ",signupButton);

var toggleVisible = function(item){
    if (item.style.display === 'none'){
        return item.style.display = 'block';
    }else{
        return item.style.display = 'none';
    }
};

window.onload = function(){
    signupButton.onclick = toggleVisible(signupBox);
    signinButton.onclick = toggleVisible(signipBox);
};

这里的问题是，即使我从未点击按钮，javascript toggleVisible也会自动激活。

因此，登录框和注册框都显示：block property。

我如何解决这个问题？

Answer 1

我建议使用standard JavaScript方法 addEventListener（）将附加的onclick事件侦听器添加到按钮。它在不同的解决方案上具有以下优势：

您可以将事件处理程序附加到元素，而不会覆盖现有的事件处理程序。

您可以向一个元素添加许多相同类型的事件处理程序，即   两次“点击”活动。

在您的代码中，它看起来像

window.onload = function(){
    signupButton.addEventListener("click", function() { toggleVisible(signupBox); });
    signinButton.addEventListener("click", function() { toggleVisible(signipBox); });
};

当前代码调用toggleVisible(..)方法并将其结果分配给按钮属性，这不是人们所期望的。

signupButton.onclick = toggleVisible(signupBox);

Answer 2

您正在调用该函数，而不是将其传入。只需将函数调用包装在匿名函数中：

signupButton.onclick = function() {
    toggleVisible(signupBox);
};

如果您不关心旧浏览器，如果您将JavaScript放在<body>标记的底部并向CSS添加规则，那么您也可以稍微简化一下代码：

document.querySelector('.signup').addEventListener('click', function() {
    document.querySelector('.signup-box').classList.toggle('hidden');
}, false);

document.querySelector('.signin').addEventListener('click', function() {
    document.querySelector('.signin-box').classList.toggle('hidden');
}, false);

CSS：

.hidden {
    display: none;
}

在纯JavaScript中切换显示

2 个答案: