Javascript login page array for username and password dont work

Question

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, May 13 '20 at 06:49

Soham · Answer 1 · 2020-05-13T07:01:38.253

4

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

edited May 13 '20 at 07:01

answered May 13 '20 at 06:48

Soham

705
3
19

Yeah I tried this before but it didn t work and still don t work just forgot to add it back :) – Taris May 13 '20 at 06:50
typo is still in lenght ;) – Rick Bronger May 13 '20 at 06:51
@Soham i tried it with updated code but still same issue :/ – Taris May 13 '20 at 06:58
1

@Taris Your HTML value is "". Change the HTML too as shown in the code. Validate first with my code. You have to dynamically bind. – Soham May 13 '20 at 07:02
@Soham I changed the html now, tried it but it still does not work – Taris May 13 '20 at 07:08

Dima Vak · Accepted Answer · 2020-05-26T20:21:15.353

<!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.

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? — Taris, May 13 '20 at 07:17
@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 https://stackoverflow.com/questions/8203473/why-is-console-log-considered-better-than-alert — Dima Vak, May 13 '20 at 07:31

Javascript login page array for username and password dont work

2 Answers2