顯示/隱藏內聯表格

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