如何在for循環中比較兩個不同長度的對象？

Question

我試圖創建一個登錄 function ，當用戶輸入有效的名稱和密碼時，它將打印“歡迎用戶”否則“無效用戶”。

在我的代碼中，它接受一個用戶名和密碼並顯示對另一個無效...我不明白為什么它會這樣顯示...

代碼：

<script>
     let userName=document.getElementById("input1");
     let mailId=document.getElementById("input2");
     var out=[{Name:"dhanam",mail:"dhanamram98@gmail.com"}, 
              {Name:"alamelu",mail:"alamu98@gmail.com"}];
     function input()
     {
         var input=userName.value;
         var output=mailId.value;
         var created=[{Name:input,mail:output}];
         return created
     }
     function output()
     {

          var inp=input();

         for(var i=0;i<inp.length;i++)
         {
             for(var j=0;j<out.length;j++)
             {
                  console.log(inp[i].Name+inp[i].mail);
                  console.log(out[j].Name+out[j].mail);
              if((inp[i].Name== out[j].Name)&& 
                  (inp[i].mail==out[j].mail))
               {
              document.getElementById("out1").innerText="welcome
                                                         user";

                }
             else{
               document.getElementById("out1").innerText="Invalid 
                                                          user";
                }
             }

           }

       }
      var but=document.getElementById("out");
      but.addEventListener("click",output);
  </script>

在這里找到小提琴：

https://jsfiddle.net/xp1Lrbdh/#&togetherjs=d0wTznLFgu

Answer 1

The issue is because of the iteration you are doing even after finding if entered user is valid user. In simple terms, putting a break statement solves your problem.
See the snippet below:

    let userName=document.getElementById("input1");
    let mailId=document.getElementById("input2");
    var out=[{Name:"dhanam",mail:"dhanamram98@gmail.com"}, 
    {Name:"alamelu",mail:"alamu98@gmail.com"}];
    function input()
    {
        var input=userName.value;
        var output=mailId.value;
        var created=[{Name:input,mail:output}];
        return created
    }
    function output()
    {
        var inp=input();
        for(var i=0;i<inp.length;i++)
        {
            for(var j=0;j<out.length;j++)
            {
                console.log(inp[i].Name, inp[i].mail);
                console.log(out[j].Name, out[j].mail);
                if((inp[i].Name== out[j].Name)&&(inp[i].mail==out[j].mail))
                {
                    document.getElementById("out1").innerText="welcome user";
                    break;

    }
    else{
        document.getElementById("out1").innerText="Invalid user";
    }


    }

  }

  }
  var but=document.getElementById("out");
  but.addEventListener("click",output);

注意：這不是驗證憑據的最佳做法，也應避免使用 var，請改用 let、const

Answer 2

const accounts = [
  {
    name:"dhanam",
    mail:"dhanamram98@gmail.com"
  },
  {
    name:"alamelu",
    mail:"alamu98@gmail.com"
  }
]

function output() {
   const nameNode = document.getElementById("input1")
     const mailNode = document.getElementById("input2")
     const name = nameNode.value
   const mail = mailNode.value
   const found = accounts.find(a => a.name === name && a.mail === mail)
   if (found) {
            document.getElementById("out1").innerText="welcome user";
     } else {
            document.getElementById("out1").innerText="Invalid user";
     }  
}

var but=document.getElementById("out");
but.addEventListener("click",output);