javascript中的计算字段不起作用

Question

问题：

• 当您在“总重量”中输入一个值时，乘以 “Air Rate”的值并以“Total Air USD”返回结果 除非输入以下任何数字： 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());