I have a problem where I have to click twice in order for my JavaScript function to run.

HTML for the button:

<input type="button" id="logintrigger" value="Log In" onClick="hideshow();"/>

JavaScript:

function hideshow() {
    var toggle = document.getElementById('logincontainer');
    toggle.style.display = toggle.style.display == "none" ? "block" : "none";
}

I have been searching around and haven't found anything that helped.

Thank You.

I have a problem where I have to click twice in order for my JavaScript function to run.

HTML for the button:

<input type="button" id="logintrigger" value="Log In" onClick="hideshow();"/>

JavaScript:

function hideshow() {
    var toggle = document.getElementById('logincontainer');
    toggle.style.display = toggle.style.display == "none" ? "block" : "none";
}

I have been searching around and haven't found anything that helped.

Thank You.

• javascript
• onclick
• hide
• toggle
• show

Share Improve this question Follow asked Jul 29, 2012 at 19:51 user1512677user1512677 4322 silver badges44 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Apply style="display:block" explicitly to logincontainer and then change following line : toggle.style.display = toggle.style.display == "block" ? "none" : "block";

The initial state of display property is more likely to be empty. That's why till you explicitly change it - this js function gets "".