title: jS code is not working, not showing total
body: <p>I am trying to calculate three values using JS, but the total is not being calculated. it gets values from the form elements and then function <code>calculateTotal()</code> is called <code>onchange</code>. But the total is not being displayed.
  *I am new on stackoverflow, please be kind! </p>
  
  <p>I was trying to use method Post on the form, removed it. 
  Also removed any styling.</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 getpkgPriceA() {
    //Get a reference to the form id="Mangoform"
    var theForm = document.forms["Mangoform"];
    //Get a reference to the select id="qtyA"
    var QuantityA = theForm.elements["qtyA"];
    if (QuantityA == null || QuantityA === false) {
      var totalpkgPriceA = 0;
      return totalpkgPriceA;
    } else {
      var totalpkgPriceA = 5.99 * QuantityA.value;
      return totalpkgPriceA;
    }
  }
  
  function getpkgPriceB() {
    //Get a reference to the form id="Mangoform"
    var theForm = document.forms["Mangoform"];
    //Get a reference to the select id="qtyB"
    var QuantityB = theForm.elements["qtyB"];
    if (QuantityB == null || QuantityB === false) {
      var totalpkgPriceB = 0;
      return totalpkgPriceB;
    } else {
      var totalpkgPriceB = 12.99 * QuantityB.value;
      return totalpkgPriceB;
    }
  }
  
  function getpkgPriceC() {
    //Get a reference to the form id="Mangoform"
    var theForm = document.forms["Mangoform"];
    //Get a reference to the select id="qtyC"
    var QuantityC = theForm.elements["qtyC"];
    if (QuantityC == null || QuantityC === false) {
      var totalpkgPriceC = 0;
      return totapkgPriceC;
    } else {
      var totalpkgPriceC = 17.99 * QuantityC.value;
      return totalpkgPriceC;
    }
  }
  
  function calculateTotal() {
  
    var TotalpkgPrice = getpkgPriceA() + getpkgPriceB() + getpkgPriceC() + 2;
    //display the result
    var divobj = document.getElementById('totalprice');
    divobj.style.display = 'block';
    divobj.innerHTML = "Your Total: £"
    TotalpkgPrice.toFixed(2);
  }
  
  function hideTotal() {
    var divobj = document.getElementById('totalprice');
    divobj.style.display = 'none';
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form action="#" id="Mangoform"&gt;
    &lt;div&gt;
      &lt;div&gt;
        &lt;div&gt;
          &lt;span&gt;Small: 1.3kg&lt;/span&gt;
          &lt;input type="number" id="qtyA" name="qtyA" placeholder="Quantity" onchange="calculateTotal()" min="1" max="100"&gt;
        &lt;/div&gt;
        &lt;/br&gt;
        &lt;div&gt;
          &lt;span&gt;Large: 3.3kg&lt;/span&gt;
          &lt;input type="number" id="qtyB" name="qtyB" placeholder="Quantity" onchange="calculateTotal()" min="1" max="100"&gt;
        &lt;/div&gt;
        &lt;/br&gt;
        &lt;div&gt;
          &lt;span&gt;Small: 5.0kg&lt;/span&gt;
          &lt;input type="number" id="qtyC" name="qtyC" placeholder="Quantity" onchange="calculateTotal()" min="1" max="100"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;span id="totalprice" name='totalprice'&gt;Your Total:&lt;/span&gt;
    &lt;div&gt;
      &lt;input name="submit" type="submit" value="submit" onclick="calculateTotal()"&gt;
    &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>if value in qtyA=1, qtyB=1 and qtyC=1 and adding 2 then total should be displayed<br>
  as 38.97 </p>
  
  <p>(5.99*1)+(12.99*1)+(17.99*1)+2=38.97</p>
  
  <p>if qtyA=2, qtyB=2 and qtyC=3 adding 2
  (5.99*2)+(12.99*2)+(17.99*3)+2=93.93</p>
  
  <p>Please point out the mistake. Thanks.</p>