只有当输入有效时才显示按钮

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

如你所见，我的按钮被设置为 "隐藏"，我希望只有当用户输入时它才会出现在屏幕上。 "用户ID "中输入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" />