僅當輸入有效時才顯示按鈕

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");

如您所見，我的按鈕設置為“隱藏”，我希望它僅在用戶輸入時才顯示在屏幕上：“userid”中的 1111 和用戶密碼中的 smith。

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