我正在尝试为表单上的标签创建错误消息。问题是它不起作用。提交的输入必须是数字。只要不是这样，单击按钮就会在特定标签上返回错误消息。
问题是 - 只有当您提交的第一件事是一组正确的数字时，它才可以正常工作。我似乎无法正确组合。你知道我该如何解决这个问题吗？
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>最佳答案
您的代码中有一些错误，这是我修改的版本:
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");
});
一个问题是双重 for 循环，它使您想要做的事情变得过于复杂。 然后，一旦删除，您的代码就会留下一个 for 循环，然后是一个测试，所有这些都以中断结束，因此您永远不会进行超过一次的迭代。
上面的代码基本上说的是记录 yes，除非你找到记录 nop 的理由。
关于javascript - 一次循环 2 个元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49712435/