Question

我的网页上有一个内联表单，在加载页面时被css隐藏。我还有一个显示表单的按钮。但是，如果再次单击该表单，我希望使用相同的按钮来隐藏表单。但我似乎无法让它工作，相反当我单击内联表单按钮时，即使我从未为其分配函数，表单也会消失。

这是我的HTML

<button id="signup" onclick="showForm('inline')">SignUp!</button>

        <!-- hidden inline form -->
        <div id="inline">
        <h2>Register! It's free!</h2>
        <form id="register" action="#" method="post" name="register">
        <label for="email">Email:</label>
            <input id="email" class="txt" type="email" name="email" />

        <label for="password">Password:</label>
            <input id="password" class="passtxt" type="password" name="password" />

        <label for="password">Repeat Password:</label>
            <input id="password" class="passtxt" type="password" name="password" />

        <button id="registerbtn">Register</button>
        </form> 
        </div>

这是我的JS：

function showForm(form) {

    var e = document.getElementById(form);

    if (e.style.display = 'none') 
        e.style.display = 'inline';
    else
    e.style.display = 'none';

}

单击注册按钮时，表单显示。但是，如果我再次点击它没有任何反应。但是如果我单击表单中的注册按钮，它就会消失。为什么？我该如何解决？

编辑：我选择DaveHogan作为最佳答案，因为它正是我所寻找的。但是我已经转而使用JQuery了，如果你正在阅读它。你也应该改用。

Answer 1

看起来你没有正确检查相等性（使用double equals）。

if (e.style.display == 'none')

Answer 2

如果您使用jQuery，可以使用切换：）

http://jsfiddle.net/Se5bm/

<div id="foo">omg </div>
<button id="bar">toggle me</button>

$('#bar').bind('click' , function() {
    $('#foo').toggle();
});

Answer 3

你必须要记住，“=”与“==”不同，=是要分配而且==是用于问题，这样的事情...... A = B，在这种情况下你指的是A等于B，如果你写A == B，你会问A是否等于B

显示/隐藏内联表单

3 个答案: