title: why my calculations are not correct
body: <p>I have an HTML form and a Javascript but this Javascript performs an incorrect calculation</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function hitung(){
  
  var e = (document.getElementById("ifin").value);
  var panjang = parseFloat (document.getElementById("ipanjang").value);
  var tinggi = parseFloat (document.getElementById("itinggi").value);
  var ht = 2.0;
  var hf = 0.0;
  var total = 0.0;
  
  if (e == "hpl") {
    hf = 0.0;
  }
  else if (e == "cat") {
    hf = 0.5;
  }
  else {
    hf = 0.0;
  }
  total = panjang*tinggi*ht+hf;
  document.getElementById("ototal").innerHTML =
    "Harga Total : Rp." + total.toFixed(2) + "0.000,00" + "&lt;br&gt;Sudah termasuk ongkir";</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select name="ifin" id="ifin" class="form-control input-lg" required &gt;
    &lt;option selected disabled &gt;Select Finishing&lt;/option&gt;
    &lt;option value="hpl"&gt;HPL&lt;/option&gt;
    &lt;option value="cat"&gt;Cat Duco&lt;/option&gt;
  &lt;/select&gt;
  &lt;br&gt;
  &lt;h3 align="center"&gt; Masukkan Ukuran &lt;/h3&gt;
  &lt;div class="form-group row"&gt;
    &lt;div class="col-xs-6" align="center"&gt;
      &lt;input class="form-control" type="number" placeholder="Panjang" min="1" id="ipanjang" &gt;
    &lt;/div&gt;
   &lt;div class="col-xs-6"&gt;
      &lt;input class="form-control" type="number" placeholder="Tinggi" min="1" id="itinggi"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The result is not what I wanted, the <code>hf</code> does not count, which counts only <code>panjang*tinggi*hf</code></p>