我有一段代码可以从用户那里获取 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**)
您可以按类选择所有输入，然后迭代它们。在按键或更改时添加事件侦听器。在事件回调中，您可以根据要检查的条件更改颜色。在此示例中，输入中的文本根据值的长度改变颜色。
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" } ) }