一次遍历2个元素
[英]Looping through 2 elements at a time
问题描述
I'm trying to create error messages for labels on a form. 
我正在尝试为表单上的标签创建错误消息。 Problem is that it's not working. 问题是它不起作用。 The submitted input must be a number. 提交的输入必须是数字。 Whenever it is not, clicking on the button should return a error message on the specific label. 无论何时，单击按钮都应在特定标签上返回一条错误消息。
Problem is - it only works OK if the first thing you submit is a correct set of numbers. 问题是-仅当您提交的第一件事是正确的数字集时，它才能正常运行。 I can't seem to get the combinations right. 我似乎无法正确组合。 Do you know how I can solve this? 你知道我该怎么解决吗？
let coordValues = document.getElementsByClassName("input-card__input"); let submitBtn = document.getElementsByClassName("input-card__button"); let inputLabel = document.getElementsByClassName("input-card__label"); let weatherArray = []; let labelArray = []; for(let j=0;j<inputLabel.length;j++) { labelArray.push(inputLabel[j].innerHTML); } submitBtn[0].addEventListener("click", function checkInputs() { for(let i = 0; i<coordValues.length;i++) { for(let k = 0; k<inputLabel.length;k++) { if(coordValues[i].value === "" || isNaN(Number(coordValues[i].value))) { inputLabel[k].classList.add("input-card__label--error"); inputLabel[k].innerHTML = "Oops! Write a number here." console.log("nop"); break; } else { inputLabel[k].classList.remove("input-card__label--error"); inputLabel[k].innerHTML = labelArray[k]; console.log("yep"); break; } } } });
.input-card__label--error { color: red; }
<head> </head> <body> <div class="input-card"> <h1 class="input-card__title">Where are you?</h1> <h3 class="input-card__label">LONGITUDE</h3> <input type="text" placeholder="Longitude" class="input-card__input"> <h3 class="input-card__label">ALTITUDE</h3> <input type="text" placeholder="Altitude" class="input-card__input"> <button class="input-card__button">Show me weather ⛅</button> </div> </body>
2 个解决方案
解决方案1
2 2018-04-08 09:16:28
There's a few errors in your code, here's a version I modified: 您的代码中有一些错误，这是我修改的版本：
submitBtn[0].addEventListener("click", function checkInputs() {
for(let i = 0; i<coordValues.length;i++) {
if(coordValues[i].value === "" || isNaN(Number(coordValues[i].value))) {
inputLabel[i].classList.add("input-card__label--error");
inputLabel[i].innerHTML = "Oops! Write a number here."
console.log("nop");
return;
}
inputLabel[i].classList.remove("input-card__label--error");
inputLabel[i].innerHTML = labelArray[i];
}
console.log("yep");
});
One issue is the double for loop, it over complicates what you're trying to do. 一个问题是double for循环，它使您要执行的操作变得复杂。 Then once removed your code is left with a for loop then a test which all end up with a break so you never do more than one iteration. 然后，一旦删除，您的代码将保留一个for循环，然后进行一次测试，所有测试均以中断结束，因此您执行的迭代次数不得超过一个。
The code above basically says log yes unless you find a reason to log nop. 上面的代码基本上将日志记录为“是”，除非您找到了记录日志的原因。
解决方案2
1 2018-04-11 09:00:38
In this case we need a flag to remember the error state: 在这种情况下，我们需要一个标记来记住错误状态：
submitBtn[0].addEventListener("click", function checkInputs() {
let allInputValid = true
for(let i = 0; i<coordValues.length;i++) {
if(coordValues[i].value === "" || isNaN(Number(coordValues[i].value))) {
inputLabel[i].classList.add("input-card__label--error");
inputLabel[i].innerHTML = "Oops! Write a number here."
console.log("nop");
allInputValid = false
}
else {
inputLabel[i].classList.remove("input-card__label--error");
inputLabel[i].innerHTML = labelArray[i];
}
}
if ( allInputValid )
console.log("yep");
});
Whenever an error is spotted, allInputValid is set to false. 只要发现错误，allInputValid就会设置为false。 If there's two errors you set allInputValid to false twice. 如果存在两个错误，则将allInputValid设置为false两次。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.