显示/隐藏内联表格

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

看来您没有正确检查相等性（使用双等于）。

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

Answer 2

如果要使用jQuery，则可以使用toggle :)

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