正または負の整数に応じてテキストの色を変更してください

Question

私はJavaScriptで書いた非常に簡単な電卓を持っています。基本的には2つの整数間の利益を計算し、税額は5％です。

Iは、結果数が正または負の整数である場合に応じた色を変更するために出力（#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のを使用しようとしています動作しませんでした。

誰でもこれを手伝っていただければ幸いです。

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バージョン：http://jsfiddle.net/ac81ee78/2/

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>

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

0（同様に小数をとり）