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

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

БЛОГ НА HUSL

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

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