Why is my check() function not working in the JavaScript? Please someone check my code
Question
Basically, I designed a little login page and my function for checking isn't working properly.
I created div elements and a function to check it by Id in the Javascript. But It isn't working properly It is saying "Invalid username or password" when the function is supposed to check the value in the "user and pass"
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<header id="header">Please Login Here</header>
<meta charset="utf-8">
<title id="title">Login</title>
</head>
<body>
<form>
<div id="user">
<input type="text" name="user" placeholder="Username">
</div>
<div id="pass">
<input type="text" name="pass" placeholder="Password">
</div>
<script type="text/javascript">
function check() {
if (document.getElementById("user") == "Guy" && (document.getElementById("pass")) == "123") {
alert("Welcome!")
} else {
alert("Invalid username or password!")
}
}
</script>
<div id="login">
<button type="button" name="button" onclick="check()">Login!</button>
</div>
</body>
The expected result was "Welcome!" in an alert box when the correct things are entered: username: Guy password: 123
3 answers
solution1
3 2019-06-28 22:09:01
You need to use .value on the input elements - so use querySelector . Also check your parenthesis nesting:
function check() { if (document.querySelector("#user > input").value == "Guy" && document.querySelector("#pass > input").value == "123") { alert("Welcome!") } else { alert("Invalid username or password!") } }
<div id="user"> <input type="text" name="user" placeholder="Username"> </div> <div id="pass"> <input type="text" name="pass" placeholder="Password"> </div> <div id="login"> <button type="button" name="button" onclick="check()">Login!</button> </div>
solution2
1 ACCPTED 2019-06-28 22:28:58
You get the element dev with id user and the element dev with id pass, then verify the user name and password You should read the value of user textbox and password textbox then verify that way
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <header id="header">Please Login Here</header> <meta charset="utf-8"> <title id="title">Login</title> </head> <body> <form> <div> <input type="text" Id="user" name="user" placeholder="Username"> </div> <div> <input type="text" id="pass" name="pass" placeholder="Password"> </div> <script type="text/javascript"> function check() { debugger; if (document.getElementById("user").value == "Guy" && (document.getElementById("pass").value) == "123") { alert("Welcome!") } else { alert("Invalid username or password!") } } </script> <div id="login"> <button type="button" name="button" onclick="check()">Login!</button> </div> </body>
solution3
-1 2019-06-28 22:21:39
I made a big clean
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Login</title>
<script>
function check() {
var user = document.getElementById("user").value;
var pass = document.getElementById("pass").value;
if ( user == "Guy" && pass == "123") {
alert("Welcome!")
} else {
alert("Invalid username or password!")
}
}
</script>
</head>
<body>
<header>Please Login Here</header>
<form>
<input id="user" type="text" name="user" placeholder="Username">
<input id="pass" type="password" name="pass" placeholder="Password">
<button type="submit" onclick="check()">Login!</button>
</form>
</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.