Calculated fields in javascript not working

Question

Problem:

• When you enter a value in "Total Weight" multiplies by the value of "Air Rate" and returns the result in "Total Air USD" Except when entering any of these numbers: 4, 5, 6, 7, 8 , 9 does not fulfill the condition "IF> 8" and automatically goes to the total value of "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 returns a string, not a number. So when you do

if (totalwvariable > airtotalvar)

it's comparing the strings lexicographically, not numerically, and "8" > "10" because "8" > "1".

Convert the values to numbers first.

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