JavaScript を使用して、入力値に基づいて入力フィールド (HTML) のテキストの色 (CSS) を調整します。
P粉022140576
2023-09-03 09:53:55
<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>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
すべての入力をクラスごとに選択し、それらを反復処理できます。キーの押下または変更時にイベント リスナーを追加します。イベントコールバックでは、確認したい条件に基づいて色を変更できます。この例では、入力内のテキストの色が値の長さに基づいて変わります。