javascript中的计算字段无法正常工作

时间:2017-07-13 22:17:28

标签: javascript variables if-statement input calculated-field

问题:

  • 在“总重量”中输入值时,乘以 “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>

1 个答案:

答案 0 :(得分: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());