Verwenden Sie JavaScript, um die Textfarbe in (CSS) eines Eingabefelds (HTML) basierend auf dem Eingabewert anzupassen

Question

Ich habe einen Code, der 10 Eingabewerte (Ganzzahlen und Gleitkommazahlen) vom Benutzer erhält:

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

Dann füge ich alle Eingaben in ein Array ein, um die Arbeit mit ihnen zu erleichtern:

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

Die Idee besteht darin, das CSS des HTML-Containers anzupassen, indem die Werte durchlaufen werden, und den spezifischen Container anzupassen, dessen Wert gleich 0 ist.

for (let i = 0; i < arr.length; i++) {
    if (arr[i] === 0) {
        document.getElementById(**Container des entsprechenden arr[i]-Wertes**).style.color = "red";
    } anders {
        document.getElementById(**Container des entsprechenden arr[i]-Wertes**).style.color = "black";
    }
}

Wie löse ich nun dieses Problem?

Wenn ich nur einen Container verwende, sagen wir in1, kann ich den Code ausführen, wenn ich also ("in1") einfüge < ;/ p>

(**Container des entsprechenden arr[i]-Wertes**)

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