[英]Change text colour depending on positive or negative integer
我有這個非常簡單的計算器,我用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,但它沒有用。
如果有人能幫助我,我們將不勝感激。
我稍微修改了你的代碼,所以它會根據輸出的符號改變顏色。 這不需要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/
在三元運算符的幫助下,您可以根據結果值執行類似的操作
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>
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.