根据正整数或负整数更改文本颜色

Question

我有这个非常简单的计算器，我用JavaScript编写。 基本上它计算出两个整数之间的利润，税额为5％。

我希望输出（ #result ）根据结果编号是正整数还是负整数来改变颜色。

这是我的计算器的HTML：

Buying Price
<br /><br />
<input id="buying" type="text">
<br /><br />
Selling Price               
<br /><br />
<input id="selling" type="text">
<br /><br />
<input type="submit" onclick="output();">
<p id="result" name="r1"></p>

这是我的计算器的JS：

function output(){
    var buying = document.getElementById('buying').value;
    var selling = document.getElementById('selling').value;

    parseInt(selling) / 20;

    document.getElementById('result').innerHTML =  parseInt(selling) - parseInt(buying) - parseInt(selling) / 20;
}

这是一个JS小提琴： http ： //jsfiddle.net/ac81ee78/

我试图使用jQuery，但它没有用。

如果有人能帮助我，我们将不胜感激。

Answer 1

我稍微修改了你的代码，所以它会根据输出的符号改变颜色。 这不需要jQuery - 我们可以使用普通的JS函数来改变输出框的颜色。

现场演示：

 var resultEl = document.getElementById('result'); function output() { var buying = document.getElementById('buying').value; var selling = document.getElementById('selling').value; var resultVal = parseInt(selling) - parseInt(buying) - parseInt(selling) / 20; resultEl.innerHTML = resultVal if (resultVal >= 0) { resultEl.style.color = "green"; } else { resultEl.style.color = "red"; } } 

 Buying Price <br /> <br /> <input id="buying" type="text"> <br /> <br />Selling Price <br /> <br /> <input id="selling" type="text"> <br /> <br /> <input type="submit" onclick="output();"> <p id="result" name="r1"></p> 

JSFiddle版本： http ： //jsfiddle.net/ac81ee78/2/

Answer 2

在三元运算符的帮助下，您可以根据结果值执行类似的操作

 function output() { var buying = document.getElementById('buying').value, selling = document.getElementById('selling').value, res = document.getElementById('result'), result = parseInt(selling) - parseInt(buying) - parseInt(selling) / 20;; res.innerHTML = result; res.style.color = result >= 0 ? 'green' : 'red'; } 

 Buying Price <br /> <br /> <input id="buying" type="text"> <br /> <br />Selling Price <br /> <br /> <input id="selling" type="text"> <br /> <br /> <input type="submit" onclick="output();"> <p id="result" name="r1"></p> 

Answer 3

jQuery示例（也取小数）

 $(document).ready(function() { $('.submit').on('click', function() { var buying = parseFloat($('#buying').val()); var selling = parseFloat($('#selling').val()); var result = (selling - buying - (selling/20)).toFixed(2); $('#result').html(result); if (result < 0) { $('#result').css('color', 'red'); } else { $('#result').css('color', 'green'); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Buying Price <br /><br /> <input id="buying" type="text"/> <br /><br /> Selling Price <br /><br /> <input id="selling" type="text"/> <br /><br /> <input class="submit" type="submit" /> <p id="result" name="r1"></p>