使用 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") 而不是

(**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">