gpt4 book ai didi

javascript - 值改变时输出文本颜色改变

转载 作者:太空宇宙 更新时间:2023-11-04 10:02:10 25 4
gpt4 key购买 nike

问题

我有一个表,其中包含用户输入值的输入,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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com