Cambia colore del testo in base al numero intero positivo o negativo

Question

Ho questa calcolatrice molto semplice che ho scritto in JavaScript. Fondamentalmente risolve il profitto tra due numeri interi con l'importo dell'imposta pari al 5%.

Desidero che l'output (#result) cambi colore a seconda che il numero del risultato sia un numero intero positivo o negativo.

Ecco HTML di mia calcolatrice:

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> 

Ecco JS di mia calcolatrice:

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; 
} 

Ecco un violino JS: http://jsfiddle.net/ac81ee78/

ho tentato utilizzando jQuery per questo però non ha funzionato.

Per favore, se qualcuno potesse aiutarmi con questo sarebbe molto apprezzato.

Answer 1

ho modificato il codice di un po 'in modo che cambia colore in base al segno dell'uscita . jQuery non è necessario per questo: possiamo usare le semplici funzioni JS per cambiare il colore della casella di output.

Demo Live:

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

Answer 2

Si può fare qualcosa di simile in base al valore del risultato con l'aiuto di operatore ternario

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 esempio (prende decimali così)

$(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 \t \t \t \t 
 
<br /><br /> 
 
<input id="selling" type="text"/> 
 
<br /><br /> 
 
<input class="submit" type="submit" /> 
 
<p id="result" name="r1"></p>