Показать кнопку, только если ввод действителен

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

Как видите, моя кнопка настроена на «скрытую», и я хочу, чтобы она отображалась на экране только при вводе пользователем: 1111 в «ИД пользователя» и Смит в пароле пользователя.

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