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: /

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/yp5an1w7/3/

• javascript
• html
• forms

• 2 You have to initially set the display in the style attribute of the input tag. Only then it will work on the first click. – debatanu Commented Jul 19, 2015 at 2:22
• 1 Isdisplayed is a blank string on the first run through. Add alert(isdisplayed) and you'll see – dmeglio Commented Jul 19, 2015 at 2:23
• In my first ment the style display:none should be assigned to the div tag. I have posted an answer to the same – debatanu Commented Jul 19, 2015 at 2:29
• 1 The JS doesn't 'see' the styles applied to the element from the style section of your document or from an external css file. Your code only 'sees' the style which is an attribute of the element. Basically, it can only see inline CSS. The first time through, your code looks for the .style.display attribute of the element. Since it doesn't have any inline style, the second block runs and now adds the attribute. The second time around, the element has an inline style and the first block is matched. Here's an example of using JS: jsfiddle/yp5an1w7/4 – enhzflep Commented Jul 19, 2015 at 2:43

4 Answers 4

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;">

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.

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?

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 remend to use jQuery:
$("#element").css("style", "none");
// and check via 
var isDisplayed = $("#element").css("style");