JavaScript中的計算字段不起作用

Question

問題：

• 當您在“總重量”中輸入一個值乘以“空運價格”的值並以“總空運美元”返回結果時，輸入以下任何數字時除外：4，5，6，7，8，9不會滿足條件“ IF> 8”並自動達到總值“ 20”

 //operation $(document).on('change keyup blur', '.changesNo', function() { calculateTotal(); }); function calculateTotal() { //AIR PRICE totalwvariable = document.querySelector('#totalweight').value; airtotalvar = document.querySelector('#airtotal').value; air = $('#airrate').val(); variable1 = 0; if (totalwvariable > airtotalvar) { variable1 = totalwvariable; } else { variable1 = airtotalvar; } if (variable1 > 8) { $('#totalairusd').val(parseFloat(variable1 * air).toFixed(2)); } else { $('#totalairusd').val(20); } } 

 .column-left { float: left; width: 30%; } .column-right { float: right; width: 30%; } .column-right2 { float: right; width: 17%; } .column-center { display: inline-block; width: 30%; } 

 <div class='row'> <div class='col-xs-12 col-sm-12 col-md-12 col-lg-12'> <table class="table table-bordered table-hover"> <thead> <tr> <th width="10%"> <center>Vlb (airtotal):</center> </th> <th width="10%"> <center>Weight Total (totalweight):</center> </th> </tr> </thead> <tbody> <tr> <td> <input type="number" class="form-control changesNo" value="35" name="airtotal" id="airtotal" ondrop="return false;" onpaste="return false;"> </td> <td> <input type="number" class="form-control changesNo" name="totalweight" id="totalweight" ondrop="return false;" onpaste="return false;"> </td> </tr> </tbody> </table> </div> </div> <div class="column-right2"> <div class="input-group-addon">Total Air USD:</div> <input type="number" class="form-control" name="totalairusd" readonly id="totalairusd" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"> <br> <div class="input-group-addon">Air Rate USD:</div> <input type="number" class="form-control" value="2.50" name="airrate" id="airrate" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"> </div> <link href="https://www.excelintra.com/pruebas/invoice2/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://www.excelintra.com/pruebas/invoice2/css/style.css" rel="stylesheet" /> <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="https://www.excelintra.com/pruebas/invoice2/js/bootstrap.min.js"></script> 

Answer 1

.value返回一個字符串，而不是數字。 所以當你這樣做

if (totalwvariable > airtotalvar)

它按字典順序而不是數字方式比較字符串，並且比較"8" > "10"因為"8" > "1" 。

首先將值轉換為數字。

totalwvariable = Number(document.querySelector('#totalweight').value);
airtotalvar = Number(document.querySelector('#airtotal').value);
air = Number($('#airrate').val());