Сравнить значения из инпутов с массивом значений

Question

Необходимо проверить что текст в каждом инпуте сопадает со своим значнием в массиве

 let inputs = document.querySelectorAll("input");
      let button = document.querySelector("#btn");

      let texts = ["text1", "text2", "text3"];

      button.addEventListener("click", function () {
        for (let input of inputs) {
          for (let text of texts) {
            if (input.value === text) {
              input.classList.add("right")
            } else {
              input.classList.add("wrong");
              
            }
          }
        }
      });

   <input />
    <input />
    <input />

    <button id="btn">click</button>

Я и перебирал их по всякому, и break добавлял, и чего только не делал. Вроде бы элементарное сравнение значений, но он мне выдаёт всякую дичь)

Answer 1

Проблема в том, что вы получаете все inputы сразу при загрузке страницы, и по этому у них всегда пустое значение в input.value. Для того, чтобы все работала корректно, вам надо каждый раз при клике получить все inputы и сравнить их значения с массивом.

ИЗМЕНЕНО: Добавляю 2 варианта решения. Первый с проверкой 1 input ко всем text[]. Второй с проверкой 1 input к одному text[] по индексу.

<div id="exp-1">
   <input />
   <input />
   <input />
   <button id="btn1">click</button>
</div>
  
<div id="exp-2">
   <input />
   <input />
   <input />
   <button id="btn2">click</button>
</div>

const btn1 = document.querySelector("#btn1");
const btn2 = document.querySelector("#btn2")
const txt = ['text1', 'text2', 'text3'];
        
        
// 1 input ко всем txt[]        
const validateInputExp1 = () => {
   const inputs = document.querySelector("#exp-1").querySelectorAll("input");
            
   for(const input of inputs){
      const value = input.value;
      const isRight = txt.some(v => v === value);
            
      input.setAttribute('style', `color: ${isRight ? 'green' : 'red'}`);
    }
            
}

// 1 input к txt[] по индексу        
const validateInputExp2 = () => {
    const inputs = document.querySelector("#exp-2").querySelectorAll("input");
            
    inputs.forEach((input, i) => {
        const value = input.value;
        const isRight = value === txt[i];
                
        input.setAttribute('style', `color: ${isRight ? 'green' : 'red'}`)
     })
            
}
        
btn1.addEventListener('click', validateInputExp1);
    
btn2.addEventListener('click', validateInputExp2);

Answer 2

Попробуйте так

let button = document.querySelector("#btn");
let texts = ["text1", "text2", "text3"];

button.addEventListener("click", function () {
  let inputs = document.querySelectorAll("input");
  inputs.forEach((input, i) => {
    input.classList.remove(); // очищаем текущие классы.
    if (input.value === texts[i]) {
      input.classList.add("right")
    } else {
      input.classList.add("wrong");
    }
  })
});

.right {
  color: green;
}
.wrong {
  color: red;
}

<input />
<input />
<input />

<button id="btn">click</button>

Однако, по хорошему, вам всё же не мешало бы указать инпутам соответствующий атрибут type="text".

Answer 3

Забавно конечно, что не один ответ так и не решил вопрос.
В целом задумака была почти правильная, но пробегаться по texts было не правильным. Так же как и добавление класса, без удаления.

С помощью for (можно и .forEach конечно) мы пробежимся по массиву inputs, потом для инпута воспользуемся classList.toggle, почему-то мало кто знает, что у метода toggle есть второй параметр, который добавит класс (если вторым параметром будет true) или удалит класс (если вторым параметром будет false). Во втором параметре мы будем сравниванить значение инпута, со значеием в texts по тому же индексу, что и у инпута.

Готово.

const inputs = document.querySelectorAll("input");
const button = document.querySelector("#btn");

let texts = ["text1", "text2", "text3"];

button.addEventListener("click", () =>
{
    for (let i = 0; i < inputs.length; i++) 
    {
        inputs[i].classList.toggle("right", inputs[i].value === texts[i]);
        inputs[i].classList.toggle("wrong", inputs[i].value !== texts[i]);
    }
});

.right {
  color: green;
  border: 1px solid currentColor;
}

.wrong {
  color: red;
  border: 1px solid currentColor;
}

<input />
<input />
<input />

<button id="btn">click</button>

Answer 4

Мне предложили несколько вариантов решений. Всем спасибо. Предлагаю свой вариант решения задачи, которая соответсвует условию, т.е без переключателей и прочего. Огромное спасибо @OliverPatterson за поданную идею с перебором значений массивов в одном цикле)

 let inputs = document.querySelectorAll("input");
      let button = document.querySelector("#btn");

      let texts = ["text1", "text2", "text3"];
      button.addEventListener("click", function () {
        for (let i = 0; i < inputs.length; i++) {
      inputs[i].classList = "";
          if (inputs[i].value == texts[i]) inputs[i].classList.add("right");
          else {
            inputs[i].classList.add("wrong");
          }
        }
      });

  <input />
    <input />
    <input />

    <button id="btn">click</button>

БЛОГ НА HUSL

Сравнить значения из инпутов с массивом значений

Ответы (4 шт):