Question

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 multiplying the severity by the likelihood. The calculation is done by the function below validate_form()

The colour according to values is:

• Green – less than 6 the input field changed colour to green
• Orange – between 6 – 9
• Red – if more than 9

The risk value writes to and input field named “risk1” “risk2” etc.

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

Could someone help me with this? Just want either the risk score to change color depending on value or the background of the cell to change colour – not really bothered. This will show then if the risk is:

• Green – Low Risk
• Orange – medium risk
• Red – high risk.

Answer 1

Something like this:

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

};

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