使用 JavaScript 根據輸入值調整輸入欄位 (HTML) 的 (CSS) 中的文字顏色

Question

我有一段程式碼可以從使用者那裡取得 10 個輸入值（整數和浮點數）：

var in1 = parseInt(document.getElementById("in1").value);
var in2 = parseInt(document.getElementById("in2").value);
var in3 = parseFloat(document.getElementById("in3").value);
var in4 = parseFloat(document.getElementById("in4").value);
var in5 = parseInt(document.getElementById("in5").value);
var in6 = parseInt(document.getElementById("in6").value);
var in7 = parseInt(document.getElementById("in7").value);
var in8 = parseFloat(document.getElementById("in8").value);
var in9 = parseFloat(document.getElementById("in9").value);
var in10 = parseInt(document.getElementById("in10").value);

然後，我將所有輸入放入一個陣列中，以便更容易使用它們：

var arr = [in1, in2, in3, in4, in5, in6, in7, in8, in9, in10];

這個想法是透過迭代值來調整 HTML 容器的 CSS，並調整特定容器，其值等於 0。

for (let i = 0; i < arr.length; i ) {
    if (arr[i] === 0) {
        document.getElementById(**container of the corresponding arr[i] value**).style.color = "red";
    } else {
        document.getElementById(**container of the corresponding arr[i] value**).style.color = "black";
    }
}

現在我該如何解決這個問題？

如果我只使用一個容器，例如in1，我就可以讓程式碼運行，所以如果我把("in1") 而不是< ;/ p>

(**container of the corresponding arr[i] value**)

Answer 1

您可以按類別選擇所有輸入，然後迭代它們。在按鍵或變更時新增事件偵聽器。在事件回呼中，您可以根據要檢查的條件變更顏色。在此範例中，輸入中的文字會根據值的長度改變顏色。

const inputs = document.getElementsByClassName("colorInput")

for (let i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener (
    "keyup",
    (event) => {
      event.target.style.color = event.target.value.length > 10 ? "red" : "green"
    }
  )
}

<input type="text" class="colorInput">
<input type="text" class="colorInput">
<input type="text" class="colorInput">
<input type="text" class="colorInput">