Как выбрать сразу два поля ввода и проверить, заполнены ли они?

ProgramBox

Как выбрать сразу два поля ввода и проверить, заполнены ли они?

Post author:admin
Запись опубликована:8 апреля, 2023
Post category:Вопросы по программированию

#javascript

Вопрос:

Итак, я создаю игру, и мне нужно проверить, есть ли в этих двух HTML <input> полях какие-либо данные, прежде чем я alert(); скажу, что они выиграли. К сожалению, я не знаю, как это реализовать, и я застрял на этом в течение нескольких часов, пожалуйста, помогите, приложив скриншот для справки.

На изображении я хочу постоянно отслеживать 2 пустых <input> поля, и как только в ОБОИХ появятся данные, я хочу создать alert();

Вот что я попробовал:

 var firstLetterField = document.querySelectorAll("input")[0].value.length;
var secondLetterField = document.querySelectorAll("input")[1].value.length;

if (!firstLetterField amp;amp; !secondLetterField) {
  console.log("Please ignore this message: NOT_FILLED...");
} else {
  alert("That's right! The word was "   spellingOfWord.join("").toUpperCase()   "! Thanks for playing!");
  window.location.href = "/";
}

1. Привет всем и добро пожаловать в SO. Было бы полезно, если бы вы включили свой HTML, который идет с JavaScript, чтобы мы могли получить полную картину.

2. Кроме того, когда вы запускаете приведенный выше код? Вы запускаете его, когда пользователь нажимает кнопки? Выполняет какое-то действие? Или только при загрузке страницы?

3. if (firstLetterField amp;amp; secondLetterField) { /* do alert */ } else { /* not filled */ }

4. @SSa1t просто отредактировал мой ответ, чтобы он соответствовал спецификации, которую вы дали в качестве комментария

Ответ №1:

Как насчет того, чтобы просто добавить общий класс к вашему пользовательскому вводу и использовать querySelectorAll для выполнения проверки?

например

 <html>
  <body id="game">
    <input data-expected="m" class="user-input" />
    <input data-expected="a" class="user-input" />

    <div id="keyboard">
      <button>d</button>
      <button>c</button>
      <button>b</button>
      <button>a</button>
      <button>d</button>
      <button>m</button>
      <button>e</button>
    </div>
  </body>

  <script>
    const inputs = document.querySelectorAll(".user-input");

    const keyboard = document
      .querySelector("#keyboard")
      .querySelectorAll("button");

    let inputPosition = 0;

    function nextInput() {
      inputPosition  = 1;
      if (inputPosition === inputs.length) {
       alert("you won");
      } 
    }

    function handleClick(event) {
      const input = inputs.item(inputPosition);
      const submittedValue = event.target.innerHTML;

      if (input.dataset.expected === submittedValue) {
        input.value = submittedValue;
        setTimeout(nextInput);
      }
    }

    keyboard.forEach((button) => button.addEventListener("click", handleClick));
  </script>
</html>

Ответ №2:

Вы могли бы зарегистрировать прослушиватель событий и проверить, выполнено ли ваше условие:

 var firstLetterField = document.querySelectorAll("input")[0];
var secondLetterField = document.querySelectorAll("input")[1];

// Function to call when both inputs contain values
function bothReady() {
    console.log("bothReady", firstLetterField.value, secondLetterField.value);
}

document.addEventListener("keyup", function (e) {
    // Wait for both fields to have values
    if (firstLetterField.value.length > 0 amp;amp; secondLetterField.value.length > 0) {
        bothReady();
    }
});

Ответ №3:

Ваш код просто отлично работает. Были просто некоторые ошибки, которые я заметил.

Вы пытались использовать длину, чтобы определить, пуста ли она. Вместо этого вы могли бы сравнить его с пустой строкой.
Вы изменили логическое значение, используя else. Похоже, это делает противоположное тому, что вы хотите.
В коде, который вы показали, вы на самом деле не определили spellingOfWord . Итак, я сделал это за вас.
Местоположение "/" совместимо не на каждом сервере. Поэтому я бы рекомендовал заменить его на "index.html" .

Вот код, который я только что создал

 function input_inputEvent() {
    var firstLetterField = document.querySelectorAll("input")[0].value;
    var secondLetterField = document.querySelectorAll("input")[1].value;
    var thirdLetterField = document.querySelectorAll("input")[2].value;
    if (firstLetterField.length != "" amp;amp; secondLetterField != "") {
        alert(
           "That's right! The word was "   
           [firstLetterField,secondLetterField,thirdLetterField].join("").toUpperCase()   
           "! Thanks for playing!"
        );
        window.location.href = "index.html";
    }
}

1. Привет, Мигаты, буквы — это кнопки, на которые нажимает пользователь, когда пользователь нажимает кнопку, в зависимости от того, была ли буква правильной, значение переходит в поле ввода, теперь, когда пользователь завершает слово, я хочу это предупреждение, если это невозможно, можете ли вы предложить мне альтернативу, используя что-то вроде кнопки отправки или что-то в этом роде?