Change the color of text depending on a positive or negative integer

Question

I have this very simple calculator that I wrote in JavaScript. Basically, it works profitably between two integers with a tax amount of 5%.

I would like the result ( #result ) to change color depending on whether the number of results is a positive or negative integer.

Here is my HTML calculator:

 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 JS calculator:

 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 the JS fiddle: http://jsfiddle.net/ac81ee78/

I tried using jQuery for this, but it did not work.

Please, if anyone can help me with this, we will be very grateful.

Answer 1

I changed your code a bit so that it changes color based on the exit sign. jQuery is not required for this - we can use simple JS functions to change the color of the output window.

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/

Answer 2

You can do something similar based on the value of the result using the 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> 

Answer 3

jQuery example (also accepts decimal values)

 $(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>