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 = parsInt(document.getElementById("in2").value);
var in3 = parsFloat(document.getElementById("in3").value);
var in4 = parsFloat(document.getElementById("in4").value);
var in5 = parsInt(document.getElementById("in5").value);
var in6 = parsInt(document.getElementById("in6").value);
var in7 = parsInt(document.getElementById("in7").value);
var in8 = parsFloat(document.getElementById("in8").value);
var in9 = parsFloat(document.getElementById("in9").value);
var in10 = parsInt(document.getElementById("in10").value);</pre>
<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><code>in1</code>처럼 하나의 컨테이너만 사용하면 코드를 실행할 수 있으므로, 대신 <code>("in1")</code> </p>
<pre class="brush:php;toolbar:false;">(**해당 arr[i] 값의 컨테이너**)</pre></p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
클래스별로 모든 입력을 선택한 다음 반복할 수 있습니다. 키를 누르거나 변경할 때 이벤트 리스너를 추가합니다. 이벤트 콜백에서는 확인하려는 조건에 따라 색상을 변경할 수 있습니다. 이 예에서 입력의 텍스트는 값의 길이에 따라 색상이 변경됩니다.