HTML button not hiding with Javascript

Question

I have 2 buttons on my page:

<button name="showLoginDiv" onclick="toggleLoginButton('button1','button2')" id="button1">Login</button><br>
<button name="showCreateDiv" onclick="toggleCreateButton('button1','button2')" id="button2">Create Account</button><br>

And these Javascript functions at the top of the page:

function toggleLoginButton(id1, id2) {
    document.getElementById(id1).style.display = 'none';
    document.getElementById(id2).style.display = 'none';

    // show login form
    var LoginForm = document.getElementById('loginForm');
    LoginForm.style.display = 'block';
}

function toggleCreateButton(id1, id2) {
    document.getElementById(id1).style.display = 'none';
    document.getElementById(id2).style.display = 'none';

    // show create account form
    var CreateForm = document.getElementById('createForm');
    CreateForm.style.display = 'block';
}

When I click either of the buttons, I want them both to disappear, and a form to show. The first button disappears correctly, but the second button doesn't, the form appears afterwards so it is not getting stuck on that line. Both buttons should disappear and a form then appears. Something is wrong with one of the style.display = 'none' lines.

edit: before and after clicking button screenshots:

This works just fine: jsbin.com/teducipequ/edit?html,js,output — Gilad Artzi
– Gilad Artzi, Commented Jun 12, 2016 at 11:56

KyleKing · Accepted Answer · 2016-06-12 12:06:37Z

3

Ditto to @Gilad Artzi's comment, your code seems to work (https://jsfiddle.net). I combined both of your functions and hard-coded the button ID's. Does this altered HTML work for you?

<!-- Buttons -->

<button name="showLoginDiv" onclick="showForm('loginForm')" id="button1">Login</button>
<br>

<button name="showCreateDiv" onclick="showForm('createForm')" id="button2">Create Account</button>
<br>

<!-- Forms -->

<form id="loginForm">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" name="user_name" />
    </div>
    <div>
        <label for="mail">Email:</label>
        <input type="email" id="mail" name="user_mail" />
    </div>
    <button name="login">Login</button>
</form>

<form id="createForm">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" name="user_name" />
    </div>
    <div>
        <label for="mail">Email:</label>
        <input type="email" id="mail" name="user_mail" />
    </div>
    <button name="create">Create Account</button>
</form>

<script>
function showForm(formID) {
    document.getElementById("button1").style.display = 'none';
    document.getElementById("button2").style.display = 'none';

    var form = document.getElementById(formID);
    form.style.display = 'block';
}
</script>

answered Jun 12, 2016 at 12:06

KyleKing

1384 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

krillgar Over a year ago

Your refactor was exactly how I was going to suggest doing it.

joshpj1 Over a year ago

It might work if I put both buttons in a div and hide the div instead of individually hiding the buttons

KyleKing Over a year ago

Good idea, that should be much more reliable. What happens when you inspect the blue circle element? What styles are computed for it? (developers.google.com/web/tools/chrome-devtools/?hl=en)

joshpj1 · Accepted Answer · 2016-06-12 12:25:26Z

0

Fixed it, the problem was (for some reason) the box shadow of the buttons was being left behind. I've changed that on button click as well and it works fine now

answered Jun 12, 2016 at 12:25

joshpj1

1861 gold badge1 silver badge10 bronze badges

Collectives™ on Stack Overflow

HTML button not hiding with Javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related