Даже после заполнения правильных учетных данных проверка не работает - PullRequest
Новая
       6

Даже после заполнения правильных учетных данных проверка не работает

0 голосов
/ 28 июня 2018

Я начал изучать Javascript и DOM сегодня, и сейчас я немного застрял в этой проблеме. Пожалуйста, пройдите через следующие строки кода и помогите мне понять, где я ошибаюсь. Я как-то приземляюсь в блоке else, независимо от того, что я печатаю в поле ввода. 

var user1 = {
    username: "Amit",
    password: "123321",
};

var user2 = {
    username: "Amir",
    password: "123456",
};

var database = [user1, user2];

var user = document.getElementById("user_name").value;
var pwd = document.getElementById("password").value;
var i; var button = document.getElementById("btn");

function isUserValid(user, pwd) {
    for(i = 0; i < database.length; i++) {
        if (user == database[i].username && pwd == database[i].password)
            return i;
    }
    return false;
}

button.addEventListener("click", function(user, pwd) {
    if (isUserValid(user, pwd))
        alert("Welcome " + database[i].username);
    else
        alert("Oops! wrong credentials");
})
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Javascript</title>
</head>
<body>
    Username: <input id="user_name"> <br>
    Password: <input id="password" type="password"> <br>
    <button id="btn">Log In</button>
    <script type="text/javascript" src="main.js"></script>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 28 июня 2018

Просто измените свой код JavaScript следующим образом: 

var user1 = {
    username: "Amit",
    password: "123321",
};

var user2 = {
    username: "Amir",
    password: "123456",
};

var database = [user1, user2];

var button = document.getElementById("btn");

function isUserValid(user, pwd){
    var result = false;
    for(var i = 0; i < database.length; i++){
        if(user == database[i].username && pwd == database[i].password){
            result = true;
            break;
        }
    }
    return result
}

button.addEventListener("click", function() {
    var user = document.getElementById("user_name").value;
    var pwd = document.getElementById("password").value;
    if (isUserValid(user, pwd))
        alert("Welcome " + user);
    else
        alert("Oops! wrong credentials");
})

Когда вы получаете user и pwd в глобальном масштабе, он просто запускается один раз, когда браузер впервые оценивает коды. Перемещая полученные переменные в button событие клика, вы будете получать их каждый раз, когда это событие срабатывает.

Edit: Также указанная здесь функция имеет неверные аргументы. 

button.addEventListener("click", function(user, pwd) {

Вы не можете получить user и pwd от слушателя. Это даст вам event этого триггера. Вы можете проверить это здесь: HTML DOM addEventListener () Метод

Когда событие происходит, объект события передается функции как первый параметр. Тип объекта события зависит от указанное событие. Например, событие «click» принадлежит Объект MouseEvent.

0 голосов
/ 28 июня 2018

В вашем коде был ряд ошибок.

  1. переменная, используемая isUserValid функция неверна.

  2. Ваш Нажмите addEventListener не был реализован правильно.

  3. возвращаемое значение isUserValid вычислено неправильно.

Пожалуйста, обратитесь к этому рабочему примеру и надеюсь, что вы получите некоторую ясность: 

 

   var user1 = {
        username: "Amit",
        password: "123321",
    };

    var user2 = {
        username: "Amir",
        password: "123456",
    };

    var database = [user1, user2];


    var i; var button = document.getElementById("btn");

    function isUserValid(user, pwd) {
        for(i = 0; i < database.length; i++) {
            if (user == database[i].username && pwd == database[i].password)
                return i;
        }
        return -1;
    }

    button.addEventListener("click", function() {
    var user = document.getElementById("user_name").value;
    var pwd = document.getElementById("password").value;
     
        
       var retVal=isUserValid(user, pwd);
      
        if (retVal==-1){
             alert("Oops! wrong credentials");
        }
         else{
           alert("Welcome " + database[retVal].username);
        }
    })
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Javascript</title>
</head>
<body>
    Username: <input id="user_name"> <br>
    Password: <input id="password" type="password"> <br>
    <button id="btn">Log In</button>
    <script type="text/javascript" src="main.js"></script>
</body>
</html>
...