Utilisez JavaScript pour ajuster la couleur du texte (CSS) d'un champ de saisie (HTML) en fonction de la valeur de saisie

Question

J'ai un morceau de code qui obtient 10 valeurs d'entrée (entiers et flottants) de l'utilisateur :

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

Ensuite, je mets toutes les entrées dans un tableau pour les rendre plus faciles à utiliser :

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

L'idée est d'ajuster le CSS du conteneur HTML en parcourant les valeurs, et d'ajuster le conteneur spécifique dont la valeur est égale à 0.

for (soit i = 0; i < arr.length; i++) {
    si (arr[i] === 0) {
        document.getElementById(**conteneur de la valeur arr[i] correspondante**).style.color = "red";
    } autre {
        document.getElementById(**conteneur de la valeur arr[i] correspondante**).style.color = "black";
    }
}</pré>
<p>Maintenant, comment puis-je résoudre ce problème ? </p>
<p>Si j'utilise juste un conteneur, disons <code>in1</code>, je peux exécuter le code, donc si je mets <code>("in1")</code> &Lt ;/ p> ;
<pre class="brush:php;toolbar:false;">(**conteneur de la valeur arr[i] correspondante**)

Answer 1

Vous pouvez sélectionner toutes les entrées par classe, puis les parcourir. Ajoutez un écouteur d'événement en appuyant sur une touche ou en modifiant. Lors du rappel d'événement, vous pouvez modifier la couleur en fonction de la condition que vous souhaitez vérifier. Dans cet exemple, le texte de l'entrée change de couleur en fonction de la longueur de la valeur.

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