[英]Show Button only if Input is Valid
<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.如您所见,我的按钮设置为“隐藏”,我希望它仅在用户输入时才显示在屏幕上:“userid”中的 1111 和用户密码中的 smith。
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" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.