Changing Text Colour Or Background Depending On Value Of Input Field

Possible Duplicate: How do I change the background color with Javascript? I have this javascript function which works fine but I wanted to add to it. The Risk is calculated by m

Solution 1:

Something like this:

var changeColor = function(obj){

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

};

Then inside your validate_form() function:

changeColor(document.calc.risk1);

Even better would be to create CSS classes for each color and do something like:

obj.className = 'green';

instead of

obj.style.backgroundColor = 'green';

Solution 2:

you can do this using jQuery

your CSS should look like this:

.low-risk{
    background: green;
}

.medium-risk{
    background: orange;
}

.high-risk{
    background: red;
}

and here is a javascript function for changing the color:

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