HTML按钮没有隐藏Javascript

Question

我的页面上有2个按钮：

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

这些Javascript函数位于页面顶部：

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';
}

当我点击其中一个按钮时，我希望它们都消失，并显示一个表单。第一个按钮正确消失，但第二个按钮不会消失，之后会显示该表单，因此不会卡在该行上。两个按钮都应该消失，然后会出现一个表单。其中一条style.display = 'none'行出了问题。

编辑：点击按钮截图前后：

Answer 1

与@Gilad Artzi的评论相同，你的代码似乎有效（https://jsfiddle.net）。我结合了你的两个功能并对按钮ID进行了硬编码。这改变了HTML是否适用于您？

<!-- 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>

Answer 2

修正了它，问题是（由于某种原因）按钮的盒子阴影被遗忘了。我也点击了按钮点击它，现在它正常工作