Question

我正在尝试为表单上的标签创建错误消息。问题是它不起作用。提交的输入必须是数字。如果不是，单击按钮应在特定标签上返回错误消息。

问题是 - 只有你提交的第一件事是一组正确的数字才能正常工作。我似乎无法正确组合。你知道我怎么能解决这个问题吗？

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>

Answer 1

您的代码中存在一些错误，这是我修改过的版本：

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循环然后一个测试，最后都会有一个中断，所以你永远不会进行多次迭代。

上面的代码基本上表示记录是，除非你找到记录nop的理由。

Answer 2

在这种情况下，我们需要一个标志来记住错误状态：

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");  
});

每当发现错误时，allInputValid都设置为false。如果出现两个错误，则将allInputValid设置为false两次。

一次循环2个元素

2 个答案: