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

修復它，問題是（出於某種原因）按鈕的盒子陰影被留下。我改變了按鈕點擊以及它現在工作正常

Answer 2

同上到@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>