我需要在我的对象中创建一个新用户和密码

Question

我需要在我的对象中创建一个新的用户名和密码，当我在我的文本输入中键入它时，之后我需要检查它，如果它们等于我在我的数组对象中的用户名和密码，所以消息是你在，如果不相等，你需要显示消息密码或用户名相同，请使用另一个用户名。

当你创建一个新的密码和用户名时，我需要将它添加到数组中，然后我需要输入它，如果它相等，所以我登录了，但我不能让它好，我差点思考它是如何工作的，为什么当我单击按钮时，该功能不起作用，但在控制台中我没有看到错误。

window.onload = function(){
      document.getElementById("myButton").addEventListener("click", sys.addUser());
      var newUser = myUser.value;
     var newPass = myPassword.value;
   };

   var sys = {
       users:[
             {username: "alexandr", password:"1334"},
             {username: "evgeny", password:"1345"},
       ],
       addUser: function(username, password){
            var same = false;
            for(var x = 0; x < sys.users.username && sys.users.password; x++){
              if( newUser.length == this.users.username.length[x]){
                  same = true;
                if(same == true){
                    myMessage.innerHTML ="Its a same"; 
                }
                else if(newPass.length == this.users.password.length[x]){
                    same = true;
                    myMessage.innerHTML ="Its a same"; 
                }                   
                else{
                  this.users.username.push(newUser);
                  myMessage.innerHTML = "Ok";

                }
              }
            }

       }

   };

Answer 1

您可以使用some() 方法检查某些对象是否与您的输入值具有相同的密码或输入。

var sys = {
  users: [{
    username: "alexandr",
    password: "1334"
  }, {
    username: "evgeny",
    password: "1345"
  }],
  addUser: function() {
    var myUser = document.getElementById('myUser').value
    var myPassword = document.getElementById('myPassword').value
    
    // This will check if object with same username and password exists in array
    var check = this.users.some(function(e) {
    	return e.username == myUser && e.password == myPassword
    })
    
    console.log(check ? 'Correct' : 'Wrong username or password.')
  }
};

// You need to use bind here so that context of this in your method is that object and not element on which you are calling event listener
document.getElementById("myButton").addEventListener("click", sys.addUser.bind(sys));

<input type="text" id="myUser">
<input type="text" id="myPassword">
<button id="myButton">Check</button>

Answer 2

从逻辑上讲，您正在检查长度，而您必须检查内容。 例如，sunils 将与 evgeny 匹配，即使它们不同。

有这个： newuser == users.username[x] 代替

Answer 3

那里有很多错误，使用您的代码，因为它是我把它变成了这个。使用代码差异工具查看所有更改

正如你所说，这是一个学习练习，所以我认为更正你的代码对你来说比向你展示更好的方法更有用。

将来你最好使用 jsfiddle 来提供一个半工作示例供人们一起玩

<html>
<body>
<button type=button id=myButton>click me</button>
<input type="text" id='myUser'/>
<input type="text" id='myPassword'/>
    <span type="text" id='myMessage'></span>

<script>


    var sys = {
        users: [
              { username: "alexandr", password: "1334" },
              { username: "evgeny", password: "1345" },
        ],
        addUser: function (username, password)
        {
            newUser = document.getElementById("myUser").value;
            newPass = document.getElementById("myPassword").value
            myMessage = document.getElementById("myMessage")

            var same = false;
            for (var x = 0; x < sys.users.length; x++)
            {
                if (newUser.length == sys.users[x].username.length)
                {
                    same = true;
                    if (same == true)
                    {
                        myMessage.innerHTML = "Its a same";
                    }
                    else if (newPass.length == sys.users[x].password.length)
                    {
                        same = true;
                        myMessage.innerHTML = "Its a same";
                    }
                }
            }
            if (!same)
            {
                sys.users.push({ username: newUser, password: newPass });
                alert(sys.users.length);
                myMessage.innerHTML = "Ok";
            }               
        }
    };



   window.onload = function(){

    document.getElementById("myButton").addEventListener("click", sys.addUser);
   };

</script>
</body>
</html>