Ausgang ändert, wenn die Textfarbe Wert

ProblemAusgang ändert, wenn die Textfarbe Wert

ändert I eine Tabelle, die Eingänge hat, die der Benutzer Werte eingibt, läuft JavaScript Calc. und zeigt den Ausgabewert an. Um die Benutzerfreundlichkeit zu verbessern, möchte ich die Farbe des Textes ändern, wenn sich die Ausgabe basierend auf den Berechnungen ändert, die JavaScript ausführt. Ist das möglich?

Mein Effort

Ich habe über das Internet gesucht und habe nichts anderes, als wenn Werte in den Eingang der Eingabe nie etwas zu tun mit dem Ausgangstext gefunden.

Beispielcode 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(); 

});

Quelle

2016-07-08 C. Kelly

add Quellcode https://jsfiddle.net. als POC –

Sie haben bereits eine Klasse am Eingang. Ich schlage vor, dass Sie eine Standardfarbe für den Text hier über CSS setzen und von dort arbeiten. Gelb ist schwer zu sehen. Ich habe blau verwendet

Wenn Sie das Snippet unten ausführen, werden Sie sehen, dass, wenn Sie 1 in das erste Eingabefeld eingeben, die Ausgabe blau ist, aber wenn Sie z. 4 oder 5, da das Ergebnis über 10 ist, ist der Ausgang rot.

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>

Quelle

2016-07-08 22:08:41

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

So etwas wie das?

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(',') +')') 
}

Quelle

2016-07-08 21:08:26 Marcus

Ausgang ändert, wenn die Textfarbe Wert

Antwort

Verwandte Themen