Перебор 2 элементов за раз

avatar
João Araújo
7 апреля 2018 в 22:08
40
2
0

Я пытаюсь создать сообщения об ошибках для меток в форме. Проблема в том, что он не работает. Представленный ввод должен быть числом. Если это не так, нажатие на кнопку должно возвращать сообщение об ошибке на определенной метке.

Проблема в том, что это работает нормально только в том случае, если первое, что вы отправляете, это правильный набор чисел. Я не могу правильно подобрать комбинации. Вы знаете, как я могу это решить?

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>
Источник
charlietfl
7 апреля 2018 в 22:16
1

Необходимо предотвратить отправку формы в случае возникновения ошибки. Event.preventDefault()

Ответы (2)

avatar
Willy
11 апреля 2018 в 09:00
1

В этом случае нам нужен флаг для запоминания состояния ошибки:

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.

avatar
Willy
8 апреля 2018 в 09:16
2

В вашем коде есть несколько ошибок, вот версия, которую я изменил:

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, а затем с тестом, который заканчивается разрывом, поэтому вы никогда не выполняете более одной итерации.

Приведенный выше код в основном говорит log yes, если вы не найдете причину для log nop.

João Araújo
8 апреля 2018 в 09:57
0

Спасибо! но если оставить все поля пустыми и нажать кнопку, почему только первая метка меняется на сообщение об ошибке? Я хочу, чтобы они оба изменились на сообщение об ошибке.