简体   繁体   中英

Show/Hide inline Form

I have an inline form on my webpage that is hidden by css when the page is loaded. I also have a button to display the form. However, I want that same button to hide the form if it's clicked again. But I can't seem to get it working, instead when I click the inline form button the form disappears even though I never assigned a function to it.

Here's my 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>

Here's my JS:

function showForm(form) {

    var e = document.getElementById(form);

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

}

When I click the signup button, the form shows. However if I click it again nothing happens. But if i click the register button in the form, it disappears. Why? and how can I fix it?

EDIT: I chose DaveHogan's as the best answer as it was what I was looking for. But I have switched over to using JQuery instead, and if you're reading this. You should switch too.

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

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

If you would use jQuery, you could use toggle :)

http://jsfiddle.net/Se5bm/

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

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

您必须记住,“ =”与“ ==”不同,=是要分配的,而==是要问的问题,诸如此类... A = B,在这种情况下,您将A等于B,如果您写A == B,则您在询问A是否等于B

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM