javascript if else using math adding value to field not working

Question

Cant get this to work, getting blind staring at it. Any ideas? Trying to put the value kg into the field lbh if it is higher than the product of *m3total (l*****b*****h/100000/00035)*. It is used to calculate the fright price for a shipment.

It uses to calculations in the if else and i'm thinking im missing something here.

function add() {
  var m3 = parseInt(document.getElementById("m3").value);
  var kg = parseInt(document.getElementById("kg").value);
  var l = parseInt(document.getElementById("L").value);
  var b = parseInt(document.getElementById("B").value);
  var h = parseInt(document.getElementById("H").value);
  var x = 0.0035;
  var y = 3350;


  var total = 0;
  kg = +kg || 0
  m3 = +m3 || 0
  l = +l || 0
  b = +b || 0
  h = +h || 0
  total = Math.ceil((m3total / 0.0035));
  kgtotal = (kg + 0)
  m3total = (l * b * h) / 1000000;
  (document.getElementById("m3").value) = m3total;
}
if ((total > kgtotal)) {

  (document.getElementById("LBvekt").value) = total;

} else if ((total < kgtotal)) {
  (document.getElementById("LBvekt").value) = kgtotal;
}

<p>Click the button</p>

<button onclick="add()">Try it</button>

<p id="demo"></p>


<div class="form-group">
  <div class="col-sm-6 col-sm-offset-3">
    <div class="row gutter-sm">


      <div class="col-sm-3 m-b-15 m-sm-b-0">
        <input type="text" class="form-control" id="kg" name="kg" placeholder="KG" onChange="add()">
      </div>
      <div class="col-sm-3 m-b-15 m-sm-b-0">
        <input type="text" class="form-control" id="m3" name="m3" placeholder="m3" readonly>
      </div>
      <div class="col-sm-3 m-b-15 m-sm-b-0">
        <input type="text" class="form-control" name="LBvekt" id="LBvekt" placeholder="LBvekt">
      </div>

    </div>
  </div>
</div>

<div class="form-group">
  <div class="col-sm-6 col-sm-offset-3">
    <div class="row gutter-sm">


      <div class="col-sm-3 m-b-15 m-sm-b-0">
        <input type="text" class="form-control" id="L" name="L" placeholder="L (cm)">
      </div>
      <div class="col-sm-3 m-b-15 m-sm-b-0">
        <input type="text" class="form-control" id="B" name="B" placeholder="B (cm)">
      </div>
      <div class="col-sm-3 m-b-15 m-sm-b-0">
        <input type="text" class="form-control" id="H" name="H" placeholder="H (cm)" onChange="add()">
      </div>

    </div>
  </div>
</div>

Answer 1

Assuming the code in your snippet is your actual code, your if statement only executes once: when the page loads. It is outside of your add() function so it only executes when it is loaded.

Most likely you want to put your if statement inside of the add() function like this:

function add() {
  var m3 = parseInt(document.getElementById("m3").value);
  var kg = parseInt(document.getElementById("kg").value);
  var l = parseInt(document.getElementById("L").value);
  var b = parseInt(document.getElementById("B").value);
  var h = parseInt(document.getElementById("H").value);
  var x = 0.0035;
  var y = 3350;


  var total = 0;
  kg = +kg || 0
  m3 = +m3 || 0
  l = +l || 0
  b = +b || 0
  h = +h || 0
  m3total = (l * b * h) / 1000000;
  total = Math.ceil((m3total / 0.0035));
  kgtotal = (kg + 0)
  
  (document.getElementById("m3").value) = m3total;
  if ((total > kgtotal)) {

    (document.getElementById("LBvekt").value) = total;

  } else if ((total < kgtotal)) {
    (document.getElementById("LBvekt").value) = kgtotal;
  }
}

<p>Click the button</p>

<button onclick="add()">Try it</button>

<p id="demo"></p>


<div class="form-group">
  <div class="col-sm-6 col-sm-offset-3">
    <div class="row gutter-sm">


      <div class="col-sm-3 m-b-15 m-sm-b-0">
        <input type="text" class="form-control" id="kg" name="kg" placeholder="KG" onChange="add()">
      </div>
      <div class="col-sm-3 m-b-15 m-sm-b-0">
        <input type="text" class="form-control" id="m3" name="m3" placeholder="m3" readonly>
      </div>
      <div class="col-sm-3 m-b-15 m-sm-b-0">
        <input type="text" class="form-control" name="LBvekt" id="LBvekt" placeholder="LBvekt">
      </div>

    </div>
  </div>
</div>

<div class="form-group">
  <div class="col-sm-6 col-sm-offset-3">
    <div class="row gutter-sm">


      <div class="col-sm-3 m-b-15 m-sm-b-0">
        <input type="text" class="form-control" id="L" name="L" placeholder="L (cm)">
      </div>
      <div class="col-sm-3 m-b-15 m-sm-b-0">
        <input type="text" class="form-control" id="B" name="B" placeholder="B (cm)">
      </div>
      <div class="col-sm-3 m-b-15 m-sm-b-0">
        <input type="text" class="form-control" id="H" name="H" placeholder="H (cm)" onChange="add()">
      </div>

    </div>
  </div>
</div>