JavaScript を使用して、入力値に基づいて入力フィールド (HTML) のテキストの色 (CSS) を調整します。

Question

ユーザーから 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);
<p>次に、すべての入力を配列に入れて操作しやすくします。</p>
<pre class="brush:php;toolbar:false;">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(**対応する arr[i] 値のコンテナ**).style.color = "red";
    } それ以外 {
        document.getElementById(**対応する arr[i] 値のコンテナ**).style.color = "black";
    }
}

この問題をどうやって解決すればよいでしょうか?

1 つのコンテナ、たとえば in1 だけを使用する場合、実行するコードを取得できるので、代わりに ("in1") を置くとします。 < ;/ p>

(**対応する arr[i] 値のコンテナ**)

Answer 1

すべての入力をクラスごとに選択し、それらを反復処理できます。キーの押下または変更時にイベント リスナーを追加します。イベントコールバックでは、確認したい条件に基づいて色を変更できます。この例では、入力内のテキストの色が値の長さに基づいて変わります。

リーリー リーリー