Use JavaScript to adjust the text color in (CSS) of an input field (HTML) based on the input value

Question

I have a piece of code that gets 10 input values ​​(integers and floats) from the user:

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

Then I put all the inputs into an array to make them easier to work with:

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

The idea is to adjust the CSS of the HTML container by iterating through the values, and adjust the specific container whose value is equal to 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";
    }
}

Now how do I solve this problem?

If I just use one container, say in1, I can get the code to run, so if I put ("in1") instead of < ;/ p>

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

Answer 1

You can select all inputs by class and then iterate over them. Add an event listener on key press or change. In the event callback you can change the color based on the condition you want to check. In this example, the text in the input changes color based on the length of the 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"
    }
  )
}

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