为什么必须两次单击此输入按钮才能调用函数？

Question

I have a simple input button (not a submit) with an onclick function to show or hide another div. For some reason, I have to click the button twice, once to select it, then a second time to execute the function.

This is the short version:

<input type="button" id="request_info_layer_button" onclick="showForm()" value="REQUEST INFORMATION" />

function showForm() {
var isdisplayed = document.getElementById("request_info_form_layer_wrapper").style.display;
if (isdisplayed == "none") {
    document.getElementById("request_info_form_layer_wrapper").style.display = "block";
    document.getElementById("request_info_layer_button").style.borderBottom = "0";
    document.getElementById("request_info_layer_button").style.borderLeft = "0";
    document.getElementById("request_info_layer_button").style.borderTop = "solid 3px #C4591B";
    document.getElementById("request_info_layer_button").style.borderRight = "solid 4px #C4591B";
} else {
    document.getElementById("request_info_form_layer_wrapper").style.display = "none";
    document.getElementById("request_info_layer_button").style.borderTop = "0";
    document.getElementById("request_info_layer_button").style.borderRight = "0";
    document.getElementById("request_info_layer_button").style.borderLeft = "solid 3px #DFBC81";
    document.getElementById("request_info_layer_button").style.borderBottom = "solid 4px #DFBC81";
}

}

The full code and button behavior is here: http://jsfiddle.net/yp5an1w7/3/

Answer 1

The first time, isdisplayed is empty, so you jump to the else condition. After the else is done, the style is set to none.

The second call, sees the style as none, and updates it to block, then displays it.

As mentioned below, add the display:none directly on the id to solve the issue

<div id="request_info_form_layer_wrapper" style="display:none;">

Answer 2

When you click the first time, the onclick event is fired and it goes to the else part, because your style attribute is not set and hence display gives you empty value which is not equal to 'none'. Hence it goes to the else part and assigns the display attribute as 'none'. so

<div id="request_info_form_layer_wrapper" style="display:none">
<div id="request_info_form_wrapper">
    <form name="request_info" id="request_info_form" action="/somepage" method="post">
        <h3>Name</h3>
        <input type="text" id="name_input" /><br />
        <p>Preferred method of contact</p>
        <h3>Email</h3>
        <input type="text" id="email_input" /><br /><br />
        <h3>Phone</h3>
        <input type="text" id="phone_input" /><br /><br />
        <p>Thanks for your interest in our program. We'll only use your contact information to send additional materials to help you understand the program better.</p>
        <input type="submit" id="submit_button" value="SUBMIT" />
    </form>
</div>

Put the above and your function should work on the first click.

Answer 3

Checking if the display style is none will fail. You can fix it by changing your css or by swapping your function around to check if isdisplayed == 'block' rather than isdisplayed == 'none'.

There's a good explanation here: Why does my button need to be clicked twice for the event handler to work the first time, but thereafter just once?

Answer 4

There is a difference between the element's style attribute and the class property. Meaning yourElement.style is the attribute attached to the element. This is not the same as the styles defined by a css class. You can either add a style attribute to your element:

<div style="display:none;">...</div>

or access the underlying css class:

// pure JS
document.styleSheets[0].cssRules[0]
// but I would highly recommend to use jQuery:
$("#element").css("style", "none");
// and check via 
var isDisplayed = $("#element").css("style");