Gunakan JavaScript untuk melaraskan warna teks dalam (CSS) medan input (HTML) berdasarkan nilai input

Question

Saya mempunyai sekeping kod yang mendapat 10 nilai input (integer dan terapung) daripada pengguna:

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

Kemudian saya meletakkan semua input ke dalam tatasusunan untuk menjadikannya lebih mudah untuk digunakan:

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

Ideanya ialah untuk melaraskan CSS bagi bekas HTML dengan mengulangi nilai dan melaraskan bekas tertentu yang nilainya sama dengan 0.

for (biar i = 0; i < arr.length; i++) {
    jika (arr[i] === 0) {
        document.getElementById(**bekas nilai arr[i] yang sepadan**).style.color = "merah";
    } lain {
        document.getElementById(**bekas nilai arr[i] yang sepadan**).style.color = "hitam";
    }
}

Sekarang bagaimana saya hendak menyelesaikan masalah ini?

Jika saya hanya menggunakan satu bekas, sebut in1, saya boleh mendapatkan kod untuk dijalankan, jadi jika saya meletakkan ("in1") < ;/ p>

(**bekas nilai arr[i] yang sepadan**)

Answer 1

Anda boleh memilih semua input mengikut kelas dan kemudian mengulanginya. Tambah pendengar acara pada kekunci tekan atau tukar. Dalam panggilan balik acara anda boleh menukar warna berdasarkan keadaan yang anda ingin semak. Dalam contoh ini, teks dalam input berubah warna berdasarkan panjang nilai.

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