Hello I am trying to make a login page with javascript and stuck at this situation. I thought to have a array where the usernames and password. Here is my code where i could not get it how to make that it proves the username with the corresponding password
Taris
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<script src="login.js"></script>
<input type="username" id="myText" value="">
<input type="password" id="myText1" value="">
<button id="button">login</button>
<script>
var userArray = [
{
username: "user1",
password: "pw1"
},
{
username: "user2",
password: "pw2"
},
{
username: "user3",
password: "pw3"
}
]
function loginFunction () {
var username = document.getElementById("myText").value;
var password = document.getElementById("myText1").value;
for(i = 0; i < userArray.length; i++){
if(username == userArray[i].username && password == userArray[i].password){
alert("Hello");
}
}
}
const button = document.getElementById("button");
button.addEventListener('click', () => {
loginFunction();
});
</script>
</body>
</html>
-
What is the error that the console gives you?? But first fix your typo in your if statement. userArray.lenght should be userArray.length.. and add your propertys to your compare statement... userArray[i].{propertyname}Rick Bronger– Rick Bronger2020年05月13日 06:49:55 +00:00Commented May 13, 2020 at 6:49
-
Well it shows actually no error and I fixed my typo.Taris– Taris2020年05月13日 06:57:17 +00:00Commented May 13, 2020 at 6:57
2 Answers 2
function loginFunction () {
var username = document.getElementById("myText").value;
var password = document.getElementById("myText1").value;
for(i = 0; i < userArray.length; i++){
if(username == userArray[i].username && password == userArray[i].password){
alert("Hello");
}
}
}
Also change the HTML:
<input type="username" id="myText" value="user1">
<input type="password" id="myText1" value="pw1">
Sign up to request clarification or add additional context in comments.
5 Comments
Taris
Yeah I tried this before but it didn t work and still don t work just forgot to add it back :)
Rick Bronger
typo is still in lenght ;)
Taris
@Soham i tried it with updated code but still same issue :/
Soham
@Taris Your HTML value is "". Change the HTML too as shown in the code. Validate first with my code. You have to dynamically bind.
Taris
@Soham I changed the html now, tried it but it still does not work
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<script src="login.js"></script>
<input type="username" id="myText" value="">
<input type="password" id="myText1" value="">
<button id="button">login</button>
<script>
var userArray = [
{
username: "user1",
password: "pw1"
},
{
username: "user2",
password: "pw2"
},
{
username: "user3",
password: "pw3"
}
]
function loginFunction () {
let username = document.getElementById("myText").value;
let password = document.getElementById("myText1").value;
let currentUser = userArray.filter( user=> user.username == username && user.password == password)
currentUser.length ? console.log('Hello'): console.log('Wrong data')
}
const button = document.getElementById("button");
button.addEventListener('click', () => {
loginFunction();
});
</script>
</body>
</html>I hope, this code helps you. In case you don't understand something, you can ask me a question.
2 Comments
Taris
Thank you it worked:) Just one more question: I have never worked with this "style" so when I want to alert something, can I just replace it with the console log?
Dima Vak
@Taris this have some differences, alert stop all code and create modal window with text what user see. consol.log is method for developeds i mean, that info showed only in browser console. You can read more there stackoverflow.com/questions/8203473/…
lang-js