logo标签列表

使用纯JavaScript切换显示

javascript
3

如果单击“登录”和“注册”按钮，我想切换注册和登录盒子的可见性。我试图仅使用纯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 也会自动激活。因此，signin-box 和 signup-box 都会显示为 display:block 属性。如何解决这个问题？
标题有点误导人，这与MongoDB有什么关系？ - Jason Cust
@JasonCust 哎呀..已经修复了 - Keon Kim
2个回答
5
你正在调用函数，而不是将其传递进去。只需要用一个匿名函数来包装你的函数调用即可：
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;
}
3
我建议使用标准的JavaScript方法addEventListener()来给按钮添加onclick事件监听器。相较于其他方案，它具有以下优点：

你可以在不覆盖现有事件处理程序的情况下将事件处理程序附加到元素上。

你可以向一个元素添加许多相同类型的事件处理程序，例如两个“click”事件。

在你的代码中，它看起来像这样：
window.onload = function(){
    signupButton.addEventListener("click", function() { toggleVisible(signupBox); });
    signinButton.addEventListener("click", function() { toggleVisible(signipBox); });
};

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

signupButton.onclick = toggleVisible(signupBox);
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接