js Калькулятор на сайте HTML - Ошибка if else

var btn = document.querySelector('#btn'),
  out = document.querySelector('#out'),
  ves = document.querySelector('#ves'),
  vol = document.querySelector('#vol'),
  load = document.querySelector('#load'),
  del = document.querySelector('#del'),
  frag = document.querySelector('#frag'),
  range = document.querySelector('#range'),
  rasstoyanie = document.querySelector('.rasstoyanie').innerHTML = 0;
kub = 1,
  km = 20;
kg = 0;
// показать дистанцию
range.onchange = function() {
  var rasstoyanie = document.querySelector('.rasstoyanie').innerHTML = range.value;
}

// тариф
if (ves < 1500) {
  kg = 16;
} else if (ves >= 1500 && ves < 3000) {
  kg = 18;
} else if (ves >= 3000 && ves < 5000) {
  kg = 23;
} else if (ves >= 5000 && ves < 10000) {
  kg = 26;
} else if (ves >= 10000 && ves < 20000) {
  kg = 35;
}
// считать  
btn.onclick = function() {
  if (ves.value != '' && vol.value != '') {
    if (load.checked) {
      load.value = 1500;
    } else {
      load.value = 0;
    }
    if (del.checked) {
      del.value = 3500;
    } else {
      del.value = 0;
    }
    if (frag.checked) {
      frag.value = 2000;
    } else {
      frag.value = 0;
    }

    var sum = (ves.value * kg) + (vol.value * kub) + Number(load.value) + +Number(del.value) + Number(frag.value) + (range.value * km);
    out.innerHTML = sum;

  } else {
    alert('Укажите вес и объем груза');
  }
}

<form>
  <div class="row mb-3">
    <div class="col-xl-8 col-lg-9">
      <div class="form-group col-md-6 col-sm-6">
        <p class="badge badge-warning">Вес (кг)</p>
        <input type="text" name="ves" class="form-control" id="ves" placeholder="0" />
      </div>
      <div class="form-group col-md-6 col-sm-6">
        <p class="badge badge-warning">Объем (куб²)</p>
        <input type="text" name="vol" id="vol" class="form-control" placeholder="0" />
      </div>
      <div class="form-group col-md-6 col-sm-6">
        <p class="badge badge-warning">Расстояние (км)</p>
        <input type="text" name="range" class="form-control" id="range" placeholder="0" />
      </div>
      <div class="form-group col-md-6 col-sm-6">
        <input type="button" name="btn" id="btn" class="btn btn-light" value="Считать" />
      </div>
    </div>
  </div>
  <div class="custom-control custom-checkbox row d-flex justify-content-center mb-3">
    <div class="col-md-3" style="visibility: visible;">
      <input type="checkbox" id="load" name="mess" class="custom-control-input" />
      <label class="custom-control-label" for="load">Нужна погрузка</label>
    </div>

    <div class="col-md-3" style="visibility: visible;">
      <input type="checkbox" id="del" name="mess" class="custom-control-input" />
      <label class="custom-control-label" for="del">Доставка до места</label>
    </div>

    <div class="col-md-3" style="visibility: visible;">
      <input type="checkbox" id="frag" name="mess" class="custom-control-input" />
      <label class="custom-control-label" for="frag">Хрупкий груз</label>
    </div>
  </div>
  <div class="row mb-3">

    <div class="form-group col-md-12">
      <h2>
        <div class="badge badge-light"><label for="range">Расстояние: <span class="rasstoyanie">0</span> <span>км</span></label> / Итого: <span id="out">0.0</span> <span class="rub">₽</span></div>
      </h2>
      <!--<h1><div class="badge badge-dark"><span id="out">0.0</span> <span class="rub">₽</span></div></h1>-->
    </div>

  </div>
</form>