javascript - 如何在for循环中比较两个不同长度的对象?
问题描述
我试图创建一个登录功能,当用户输入有效的名称和密码时,它将打印“欢迎用户”否则“无效用户”。
在我的代码中,它接受一个用户名和密码并显示对另一个无效...我不明白为什么它会这样显示...
代码:
<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>
在这里找到小提琴:
解决方案
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
推荐阅读
- android - Android 模拟器无法在 Android Studio 中运行
- javascript - 使用 webdriver 访问 chrome 扩展时如何绕过 ERR_BLOCKED_BY_CLIENT?
- reactjs - React + Redux + Typescript Chrome 扩展弹出脚本 - Redux Devtools 显示“未找到商店”
- i18next - 如何配置 i18n.config.js 以便 `preact build --prerenderUrls ./prerender-urls.js` 成功?
- python - Nextcord 显示用户头像
- java - 从 JAR 访问时无法启动 Derby 数据库
- javascript - 无法在异步循环/函数中获取索引
- c++ - 是否可以使用重载运算符将用户数据推断为继承?
- c++ - 开关和映射问题 - 调用的对象类型不是函数或函数指针
- javascript - 如何使用 Bootstrap 5 在多个 HTML 页面上创建可重用的导航栏?