Can somebody help me with a non functioning javascript code for the most unsafe login page?
Question
- I need to make a login page on my website with the html and JavaScript.
- This is what I have tried so far
</div>
<ul class="login-list">
<li><h2>Member login</h2></li>
<li><input type="text" name="Username" placeholder="Username"></li>
<li><input type="password" name="Password" placeholder="Password"></li>
<li><input type="button" onclick="login();" name="Login" value="Login"></li>
<li>Forgot Password?</li>
</ul>
</div>
<script language="javascript">
function login() {
if(li.Username.value == "admin" && li.Password.value == "welcome")
{
window.open('dashboard.html')
}
else {
alert("The username and password don not match.")
}
}
</script>
- Also, I am very much aware of this being the most unsafe way of creating a login page but it does not really matter for my purpose.
- I would like for it to output an alert if the input is wrong. When the input is right I want it to route the user to the
dashboard.htmlfile.
2 answers
solution1
2 2019-09-12 19:22:19
You are trying to access the text in the input element incorrectly. You should try:
var userName = document.getElementsByName('Username')[0].value;
var passWord = document.getElementsByName('Password')[0].value;
if(userName == "admin" && passWord == "welcome")
{
window.open('dashboard.html')
}
else {
alert("The username and password don not match.")
}
document.getElementsByName() returns a NodeList, so you have to access it by an index: document.getElementsByName('staff_counter')[0] (depending on how many of these you have). Refrence
You're referencing the first element in that NodeList of that name that is why its [0]
solution2
0 ACCPTED 2019-09-12 20:29:18
The code below may be more helpful incase you plan to implement actual server side logic. it will also work great for your demo. I tried to minimize the css use
<!DOCTYPE html> <html> <head> <title>Login Page</title> </head> <style type="text/css"> div{ border: 5px solid white; margin:20px; width: 252px; } .page_center{ width: 300px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } </style> <body> <div class="page_center"> <div> <form action="" method=""> <table> <tr> <td>Username</td> <td><input type="text" name="username_input" placeholder="username"></td> </tr> <tr> <td>Password</td> <td><input type="password" name="password_input" placeholder="password"></td> </tr> </table> </form> </div> <div style="text-align: center;"> <input type="submit" name="submit_button" value="Login" onclick="Login()"> </div> <div style="text-align: center;"> <a href="#">Forgot Password?</a> </div> </div> <script type="text/javascript"> function Login(){ var username = document.getElementsByName("username_input")[0].value; var password = document.getElementsByName("password_input")[0].value; if (username == "admin" && password == "welcome") { window.open('dashboard.html') }else { alert("The username and password do not match."); } } </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.