Question

我今天已经开始学习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>

Answer 1

只需像这样更改您的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单击事件，您将在每次触发该事件时获取它们。

编辑： 您在此处提供的函数的参数也错误。

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

您无法从监听器中获得user和pwd。它将为您event提供触发条件。您可以在此处进行检查：HTML DOM addEventListener() Method

事件发生时，事件对象将以以下形式传递给函数第一个参数。事件对象的类型取决于指定的事件。例如，“ click”事件属于 MouseEvent对象。

Answer 2

您的代码中存在许多错误。

isUserValid

变量不正确。
您的 Click addEventListener 实施不正确。
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>

即使填写正确的凭证后，验证仍无法进行

2 个答案: