Show Button only if Input is Valid

Question

<input id="userid" type="text" placeholder="Enter Your ID" style="padding: 9px; margin: 9px; border-style: solid; font-size: large;" />

<input id="userpassword" type="text" placeholder="Enter Your Password" style="padding: 9px; margin: 9px; border-style: solid; font-size: large;"/>

<input id="loginbutton" type="button" value="Login" style="padding: 4px; margin: 11px; font-size: large; background-color: #000000; color: #FFFFFF;" **hidden="hidden"** />


var useridtologin = document.getElementById("userid").innerHTML;

var passwordtologin = document.getElementById("userpasword").innerHTML;

var buttonshow = document.getElementById("loginbutton");

As you can see my button is set to "hidden" and I want it to only show up on the screen if the user inputs: 1111 in "userid" and smith in userpassword.

Answer 1

 function myFunction() { var buttonshow = document.getElementById("loginbutton"); var useridtologin = document.getElementById("userid"); var passwordtologin = document.getElementById("userpassword"); if(useridtologin && passwordtologin){ if(useridtologin.value == "1111" && passwordtologin.value == "smith"){ buttonshow.style.display = "block"; } } }

 <input id="userid" type="text" placeholder="Enter Your ID" onfocusout="myFunction()" style="padding: 9px; margin: 9px; border-style: solid; font-size: large;" /> <input id="userpassword" type="text" placeholder="Enter Your Password" onfocusout="myFunction()" style="padding: 9px; margin: 9px; border-style: solid; font-size: large;"/> <input id="loginbutton" type="button" value="Login" style="padding: 4px; margin: 11px; font-size: large; background-color: #000000; color: #FFFFFF; display:none" />