JavaScript を使用して、入力値に基づいて入力フィールド (HTML) のテキストの色 (CSS) を調整します。
P粉022140576
P粉022140576 2023-09-03 09:53:55
0
1
540
<p>ユーザーから 10 個の入力値 (整数と浮動小数点) を取得するコードがあります。</p> <pre class="brush:php;toolbar:false;">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];</pre> <p>このアイデアは、値を反復処理することで HTML コンテナの CSS を調整し、値が 0 に等しい特定のコンテナを調整することです。 </p> <pre class="brush:php;toolbar:false;">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"; } }</pre> <p>この問題をどうやって解決すればよいでしょうか? </p> <p>1 つのコンテナ、たとえば <code>in1</code> だけを使用する場合、実行するコードを取得できるので、代わりに <code>("in1")</code> を置くとします。 < ;/ p> <pre class="brush:php;toolbar:false;">(**対応する arr[i] 値のコンテナ**)</pre></p>
P粉022140576
P粉022140576

全員に返信(1)
P粉391677921

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

リーリー リーリー
いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート