3

重複の可能性:
Javascript で背景色を変更するにはどうすればよいですか?

私は正常に動作するこのJavaScript関数を持っていますが、それに追加したかったのです。

リスクは、重大度に可能性を掛けて計算されます。計算は、validate_form() 以下の関数によって行われます。

値に応じた色は次のとおりです。

  • 緑 - 6 未満 入力フィールドの色が緑に変わりました
  • オレンジ - 6 ～ 9 の間
  • 赤 - 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;
}

誰かがこれで私を助けてくれますか? 値に応じてリスク スコアの色を変更するか、セルの背景の色を変更するかのいずれかが必要なだけです。特に気にする必要はありません。これは、リスクが次の場合に表示されます。

  • 緑 - 低リスク
  • オレンジ - 中リスク
  • 赤 - 高リスク。
4

2 に答える 2

2

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';
于 2012-12-05T16:41:27.150 に答える
1

jQueryを使用してこれを行うことができます

CSS は次のようになります。

.low-risk{
    background: green;
}

.medium-risk{
    background: orange;
}

.high-risk{
    background: red;
}

色を変更するためのJavaScript関数は次のとおりです。

<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>
于 2012-12-05T16:38:40.553 に答える