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

I have this very simple calculator which I have written in JavaScript. Basically it works out the profit between two integers with the tax amount being 5%.

我有一个用JavaScript编写的非常简单的计算器。基本上它计算两个整数之间的利润税收是5%

I would like the output (#result) to change colour depending if the result number is either a positive or negative integer.

我希望输出(#result)根据结果数是正整数还是负整数而改变颜色。

Here is my calculator's HTML:

这是我的计算器的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>

Here is my calculator's JS:

这是我的计算器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;
}

Here is a JS fiddle: http://jsfiddle.net/ac81ee78/

这里有一个JS fiddle: http://jsfiddle.net/ac81ee78/。

I have attempted using jQuery for this however it did not work.

我已经尝试使用jQuery来实现这一点，但是它并没有起作用。

Please if anyone could help me with this it would be greatly appreciated.

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

3 个解决方案

#1

I modified your code a bit so it changes color based on the sign of the output. jQuery isn't needed for this - we can use plain JS functions to change the color of the output box.

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

Live Demo:

现场演示:

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 Version: http://jsfiddle.net/ac81ee78/2/

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

#2

You can do something like this based on the result value with help of ternary operator

在三元运算符的帮助下，您可以根据结果值做类似的事情

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>

#3

jQuery example (takes decimals as well)

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>

#1