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

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>

这是我的计算器 JavaScript 代码：

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

我尝试使用jQuery来实现，但没有成功。

如果有人能帮助我解决问题，将不胜感激。

- Bradley Cousins

---

未来的建议：“它没有起作用”是一个毫无用处的陈述，除非您还描述了如何尝试以及发生了什么。幸运的是，在这种情况下，您尝试（涉及）jQuery的事实完全无关紧要，因此我们不知道您尝试了什么以及失败的原因并不重要。 - Ilmari Karonen

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

- Maximillian Laumeister

---

我知道 OP 使用了 parseInt()，但我怀疑这实际上是一个 bug。至少，如果代码只接受整数输入，那么应该有一些指示，如果用户输入 "9.99"，它将被截断为 "9"。 - Ilmari Karonen

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>

- Pranav C Balan

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>

- indubitablee