主页 / 问题 / 1595169
Accepted
alexWithoutBeard
Asked:2024-09-29 04:01:48 +0000 UTC2024-09-29 04:01:48 +0000 UTC

将输入中的值与值数组进行比较

  • 772

有必要检查每个输入中的文本是否与其在数组中的值匹配

 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>
我以各种方式检查了它们，添加了休息时间，并做了其他所有事情。这看起来像是一个简单的值比较，但它给了我各种废话）

javascript

4 个回答

  1. Best Answer

    当然，有趣的是，不止一个答案并没有解决问题。
    总的来说，这个想法几乎是正确的，但是运行起来却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>

    • 2

  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"。

    • 1

  3. 问题是，当页面加载时，您会立即获取所有输入，因此它们在 中始终具有空值input.value。为了使一切正常工作，您需要每次单击时获取所有输入并将它们的值与数组进行比较。

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

    const btn = document.querySelector("#btn");
const txt = ['text1', 'text2', 'text3'];
        
        
const validateInput = () => {
    const inputs = document.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'}`);
  }            
}
        
btn.addEventListener('click', validateInput);
    • 0

  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++) {
          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>

    • 0

相关问题