基於輸入和單擊單選按鈕的實時計算

我想基於給定買入和賣出價格的給定數量的交易創建一個實時計算器，它有2個單選按鈕作爲輸入。基於輸入和單擊單選按鈕的實時計算

發生了什麼事情，我必須在放入數值並選擇按鈕後進入回車。

我想要的是，只要我輸入值並選擇單選按鈕，它應該計算值。

PL幫我糾正我的代碼。

<!DOCTYPE html> 
<html> 
<meta charset="utf-8"> 
<title>Brokerage Calculator</title> 
<head> 
    <script src="jquery-min.js"></script> 
</head> 
<body> 
Buy Price 
<input type="number" min="0" id="bp"><br /> 
Sell Price 
<input type="number" min="0" id="sp"><br /> 
Qty: 
<input type="number" min="0" id="qty"><br /> 
NSE: 
<input name="exchname" id="nse" value="0.0000325" type="radio" checked="checked"><br /> 
BSE: 
<input name="exchname" id="bse" value="0.0000275" type="radio"><br /> 
Turnover: 
<span id="turnover">0</span><br /> 
Brokerage: 
<span id="brokerage">0</span><br /> 
Security Transction Tax: 
<span id="stt">0</span><br /> 
Total Tran Charges: 
<span id="ttc">0</span><br /> 
SEBI Charges: 
<span id="sebi">0</span><br /> 
Service Tax: 
<span id="servtax">0</span><br /> 
Stamp Duty: 
<span id="std">0</span><br /> 
Total Brokerage + Taxes: 
<span id="ttx">0</span><br /> 
Net Profit: 
<span id="pnl">0</span><br /> 

<script> 

$('input').keyup(function(){ // run anytime the value changes 

    var buyPrice = parseFloat($('#bp').val()); // get value of field 
    var sellPrice = parseFloat($('#sp').val()); // convert it to a float 
    var quantity = parseFloat($('#qty').val()); 
    var turnoverValue = (buyPrice + sellPrice) * quantity; 
    var sttValue = sellPrice * quantity * 0.025/100; 
    var sebiValue = turnoverValue * 0.0002/100; 

    var stdValue = 0.00002 * turnoverValue; 
    var excrate = document.querySelector('input[name="exchname"]:checked').value; 

    if(buyPrice<166.67){ 
     var brkgbp = 0.05; 
    } else { 
      var brkgbp = buyPrice * 0.03/100; 
    } 

    if(sellPrice<166.67){ 
     var brkgsp = 0.05; 
    } else { 
      var brkgsp = sellPrice * 0.03/100; 
    } 

    var brokerageValue = (brkgbp + brkgsp) * quantity; 
    var ttcValue = excrate * turnoverValue; 
    var servtaxValue = (brokerageValue + ttcValue + sebiValue) * 15/100; 
    var ttxValue = brokerageValue + sttValue + ttcValue + sebiValue + servtaxValue + stdValue; 
    var pnlValue = ((sellPrice - buyPrice) * quantity) - ttxValue; 
    $('#turnover').html(turnoverValue.toFixed(2)); 
    $('#brokerage').html(brokerageValue.toFixed(2)); 
    $('#stt').html(sttValue.toFixed(2)); 
    $('#sebi').html(sebiValue.toFixed(2)); 
    $('#servtax').html(servtaxValue.toFixed(2)); 
    $('#ttc').html(ttcValue.toFixed(2)); 
    $('#std').html(stdValue.toFixed(2)); 
    $('#ttx').html(ttxValue.toFixed(2)); 
    $('#pnl').html(pnlValue.toFixed(2)); 
}); 

<script> 
</body> 
</html>

來源

2017-02-10 NeoNirav

您忘了關閉腳本標記嗎？

<script> ... </script>

此外，使用

var buyPrice = parseFloat($('#bp').val()) || 0;

用默認值來初始化，所以你如果您想要的值，當你在無線電重新選擇要更改的選項沒有得到NaN的

按鈕，使用方法：

function calculate(){ // run anytime the value changes 
    .... 
} 
$('input').on('keyup', calculate); 
$('input').on('click', calculate);

編輯：我做了一個的jsfiddle

https://jsfiddle.net/v3qd7b26/

來源

2017-02-10 18:01:11

感謝您的幫助:)我已經結合了所有三個答案，它是按我的需要工作。謝謝你們 https://jsfiddle.net/neonirav/xetjhm6u/2/ – NeoNirav

多的問題在你的代碼

你缺少在結束腳本標籤/。它應該是</script>而不是<script>。

2.你需要確保輸入的值是有效數字只有然後只有繼續進行，你可以驗證使用isNaN功能在javascript

if(!isNaN(buyPrice) && !isNaN(sellPrice) && !isNaN(quantity)){

還，對於複選框需要添加另一個選擇器。所以你可以創建一個通用函數並調用它。

$("input").keyup(calculate); 
$("input:checked").keyup(calculate);

完整代碼：

$("input").keyup(calculate); 
 
$("input:checked").keyup(calculate); 
 

 
function calculate(){ // run anytime the value changes 
 
    
 
    
 
    
 
    var buyPrice = parseFloat($('#bp').val()); // get value of field 
 
    var sellPrice = parseFloat($('#sp').val()); // convert it to a float 
 
    var quantity = parseFloat($('#qty').val()); 
 
    if(!isNaN(buyPrice) && !isNaN(sellPrice) && !isNaN(quantity)){ 
 
    
 
    var turnoverValue = (buyPrice + sellPrice) * quantity; 
 
    var sttValue = sellPrice * quantity * 0.025/100; 
 
    var sebiValue = turnoverValue * 0.0002/100; 
 

 
    var stdValue = 0.00002 * turnoverValue; 
 
    var excrate = document.querySelector('input[name="exchname"]:checked').value; 
 

 
    if(buyPrice<166.67){ 
 
     var brkgbp = 0.05; 
 
    } else { 
 
      var brkgbp = buyPrice * 0.03/100; 
 
    } 
 

 
    if(sellPrice<166.67){ 
 
     var brkgsp = 0.05; 
 
    } else { 
 
      var brkgsp = sellPrice * 0.03/100; 
 
    } 
 

 
    var brokerageValue = (brkgbp + brkgsp) * quantity; 
 
    var ttcValue = excrate * turnoverValue; 
 
    var servtaxValue = (brokerageValue + ttcValue + sebiValue) * 15/100; 
 
    var ttxValue = brokerageValue + sttValue + ttcValue + sebiValue + servtaxValue + stdValue; 
 
    var pnlValue = ((sellPrice - buyPrice) * quantity) - ttxValue; 
 
    $('#turnover').html(turnoverValue.toFixed(2)); 
 
    $('#brokerage').html(brokerageValue.toFixed(2)); 
 
    $('#stt').html(sttValue.toFixed(2)); 
 
    $('#sebi').html(sebiValue.toFixed(2)); 
 
    $('#servtax').html(servtaxValue.toFixed(2)); 
 
    $('#ttc').html(ttcValue.toFixed(2)); 
 
    $('#std').html(stdValue.toFixed(2)); 
 
    $('#ttx').html(ttxValue.toFixed(2)); 
 
    $('#pnl').html(pnlValue.toFixed(2)); 
 
    } 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Buy Price 
 
<input type="number" min="0" id="bp"><br /> 
 
Sell Price 
 
<input type="number" min="0" id="sp"><br /> 
 
Qty: 
 
<input type="number" min="0" id="qty"><br /> 
 
NSE: 
 
<input name="exchname" id="nse" value="0.0000325" type="radio" checked="checked"><br /> 
 
BSE: 
 
<input name="exchname" id="bse" value="0.0000275" type="radio"><br /> 
 
Turnover: 
 
<span id="turnover">0</span><br /> 
 
Brokerage: 
 
<span id="brokerage">0</span><br /> 
 
Security Transction Tax: 
 
<span id="stt">0</span><br /> 
 
Total Tran Charges: 
 
<span id="ttc">0</span><br /> 
 
SEBI Charges: 
 
<span id="sebi">0</span><br /> 
 
Service Tax: 
 
<span id="servtax">0</span><br /> 
 
Stamp Duty: 
 
<span id="std">0</span><br /> 
 
Total Brokerage + Taxes: 
 
<span id="ttx">0</span><br /> 
 
Net Profit: 
 
<span id="pnl">0</span><br />

來源

2017-02-10 18:02:11 Agalo

感謝您的幫助:)我已經將所有三個答案結合起來，並且按照我的需求進行工作。謝謝你們 https://jsfiddle.net/neonirav/xetjhm6u/2/ – NeoNirav

你結束腳本標籤缺少/，即</script>

爲了您的輸入，你檢查的釋放一個鍵盤鍵，這個鍵不要點擊單選按鈕。由於您正在檢查輸入值是否已更改，因此應將$('input').keyup更改爲$('input').change。

編輯：當然，你應該做的NaN檢查爲好，因爲其他的答案表示 - 但你提到的問題是使用change事件解決。

來源

2017-02-10 18:04:09

感謝您的幫助:)我已經合併了所有三個答案，它是按我的需要工作。謝謝你們 https://jsfiddle.net/neonirav/xetjhm6u/2/ – NeoNirav

基於輸入和單擊單選按鈕的實時計算

回答

相關問題