입력 필드의 값에 따라 텍스트 색상 또는 배경을 변경

Question

가능한 중복 :

How do I change the background color with Javascript?

내가 잘 작동이 자바 스크립트 기능을 가지고 있지만 나는 그것을 추가하고 싶었다.

위험도는 심각도에 우도를 곱하여 계산됩니다. 6 미만 입력 필드 녹색

오렌지 색으로 변화 - - 9 - 6 사이

• 녹색 : 계산은 validate_form 아래 함수()의 값에 따른

  색이 수행되고
  

• 레드 - 9 개 이상
  

위험의 값이 "risk1"라는 이름 입력 필드에 기록하는 경우 "risk2"등

function validate_form () { 
    valid = true; 

    document.calc.risk1.value = document.getElementById('data_1_severity').value*document.getElementById('data_1‌​_likelihood').value; 
    document.calc.risk2.value = document.getElementById('data_2_severity').value*document.getElementById('data_2‌​_likelihood').value; 

    return valid; 
} 

누군가가 도와 줄 수 있습니까? 위험 점수가 값이나 셀의 배경에 따라 색상을 변경하여 색상을 변경하기 만하면됩니다. 위험이 경우에 다음이 표시됩니다 :

• 녹색 - 낮은 위험
  
• 오렌지 - 중간 위험
• 빨간색 - 위험.

Answer 1

뭔가 : 여기

.low-risk{ 
    background: green; 
} 

.medium-risk{ 
    background: orange; 
} 

.high-risk{ 
    background: red; 
} 

및 색상을 변경하는 자바 스크립트 함수입니다 이 :

var changeColor = function(obj){ 

    if(obj.value < 6){ 
    obj.style.backgroundColor = 'green'; 
    } else if(obj.value >= 6 && obj.value <= 9){ 
    obj.style.backgroundColor = 'orange'; 
    } else if(obj.value > 9){ 
    obj.style.backgroundColor = 'red'; 
    } 

}; 

당신의 validate_form 내부 그리고

() 함수 :

obj.className = 'green'; 

대신

obj.style.backgroundColor = 'green'; 

Answer 2

당신이 jQuery를

를 사용하여이 작업을 수행 할 수 있습니다 다음과 같아야합니다 당신의 CSS

: 같은

<script> 
    function changeInputColor(input, value){ 
     $(input).removeClass(); 
     if (value < 6){ 
      $(input).addClass('low-risk'); 
     } 
     else if(value >= 6 && value <= 9){ 
      $(input).addClass('medium-risk'); 
     } 
     else{ 
      $(input).addClass('high-risk'); 
     } 
    } 
</script>