问题
我有一个表，其中包含用户输入值的输入，JavaScript 运行 Calc。并显示输出值。为了让用户体验更好，我想在输出根据 JavaScript 执行的计算发生变化时更改文本的颜色。这可能吗？
我的努力
我查看了 Internet，除了在输入中输入值时没有发现任何其他内容，从未发现任何处理输出文本的内容。
示例代码 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();
});
最佳答案
您已经有一个关于输入的类。我建议您通过 css 为此处的文本设置默认颜色并从那里开始工作。黄色很难看。我用过蓝色
如果你运行下面的代码片段，你会看到如果你在第一个输入框中输入 1，输出是蓝色的，但是当你输入例如4 或 5，当结果超过 10 时，输出为红色。
var foo = function(){
var val = parseFloat($('#input').val());
var total = val * 3;
if(total > 10){
$('.input_blue').css("color", "red");
}
$('#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>
<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>关于javascript - 值改变时输出文本颜色改变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38274785/