Button's onclick function is not working

Question

I don't know why this function is not working.

HTML:

<button id="welcomehomebtnlogin" type="button" onclick="loginformfunction()">Login</button>

JavaScript:

function loginformfunction()
{
    document.getElementById("welcomehomebtndiv").style.display = "none";
    document.getElementById("loginform").style.display = "block";
}

What I want to do is: if the user clicks on the "Login" button, one form will disappear with display = "none" . The button is part of this form, and it will also disappear. Then a second form will be shown.

It's not working; any ideas why?

Answer 1

Your code look fine, check the basic example bellow.

Hope this helps.

---

 function loginformfunction() { document.getElementById("welcomehomebtndiv").style.display = "none"; document.getElementById("loginform").style.display = "block"; } document.getElementById("welcomehomebtnlogin").addEventListener('click', loginformfunction, false); 

 #loginform{ display: none; } 

 <div id='welcomehomebtndiv'> Welcome HOME div <button id="welcomehomebtnlogin" type="button">Login</button> </div> <div id='loginform'> Login div </div>