JavaScript를 사용하여 입력 값에 따라 입력 필드(HTML)의 (CSS) 텍스트 색상을 조정합니다.

Question

사용자로부터 10개의 입력 값(정수 및 부동 소수점)을 가져오는 코드 조각이 있습니다.

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

그런 다음 작업하기 쉽도록 모든 입력을 배열에 넣습니다.

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

이제 이 문제를 어떻게 해결하나요?

in1처럼 하나의 컨테이너만 사용하면 코드를 실행할 수 있으므로, 대신 ("in1")

(**해당 arr[i] 값의 컨테이너**)

Answer 1

클래스별로 모든 입력을 선택한 다음 반복할 수 있습니다. 키를 누르거나 변경할 때 이벤트 리스너를 추가합니다. 이벤트 콜백에서는 확인하려는 조건에 따라 색상을 변경할 수 있습니다. 이 예에서 입력의 텍스트는 값의 길이에 따라 색상이 변경됩니다.

으아악 으아악