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());