出力テキストの色の変化値が

問題出力テキストの色の変化値が

を変更し、私は、ユーザーが値を入力する入力を持つテーブルを持って、JavaScriptはCalcは実行されます。出力値を表示する。ユーザーエクスペリエンスを向上させるために、JavaScriptが実行する計算に基づいて出力が変更されたときに、テキストの色を変更したいと考えています。これは可能ですか？

私の努力

私は、インターネット上で見ていると、入力に値を入力するとき以外は決して見つからない出力テキストを扱う何もしていません。

サンプルコード http://codepen.io/coryk/pen/rLGZYa

HTML

<head> 
    <title></title> 
</head> 
<body> 
    <table> 
     <tr> 
      <td>Input</td> 
         <td><input class="input_green" id="input" type="number" value="0"></td> 
      <td></td> 
      <td>Output</td> 
      <td><input class="input_yellow" id="output" readonly type="number" value="10"></td> 
     </tr> 
    </table> 
</body>

はJavaScript

var foo = function(){ 
    var val = parseFloat($('#input').val()); 
    var total = val * 3; 
    $('#output').val(total); 
} 

foo(); 

document.getElementById("input").onchange = (function() { 
foo(); 

});

出典

2016-07-08 C. Kelly

ソースコードhttps://jsfiddle.netを加えます。 POCとして –

すでに入力にクラスがあります。私はここでテキストのデフォルトの色をCSSで設定し、そこで作業することをお勧めします。黄色は見えにくいです。私は青を使用しました

以下のスニペットを実行すると、最初の入力ボックスに1を入力すると、出力は青色になります。 4または5の場合、結果は10を超えるので、出力は赤です。

var foo = function(){ 
 
\t var val = parseFloat($('#input').val()); 
 
\t var total = val * 3; 
 
\t if(total > 10){ 
 
\t \t $('.input_blue').css("color", "red"); 
 
\t } 
 
\t $('#output').val(total); 
 
} 
 

 
foo(); 
 

 
document.getElementById("input").onchange = (function() { 
 
foo(); 
 
});

.input_blue{color:blue;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <table> 
 
     <tr> 
 
      <td>Input</td> 
 
\t \t \t \t \t \t <td><input class="input_green" id="input" type="number" value="0"></td> 
 
      <td></td> 
 
      <td>Output</td> 
 
      <td><input class="input_blue" id="output" readonly type="number" value="10"></td> 
 
     </tr> 
 
    </table> 
 
</body>

出典

2016-07-08 22:08:41

http://codepen.io/anon/pen/zBEBNP –

このような何か？

var foo = function(){ 
    var val = parseFloat($('#input').val()); 
    var total = val * 3; 
    $('#output') 
    .val(total); 
    .css('color', 'rgb('+[(val^2)%256,(val*5)%256, (val%256)*2].join(',') +')') 
}

出典

2016-07-08 21:08:26 Marcus

出力テキストの色の変化値が

答えて

関連する問題