title: Can't connect properly an input range value to javascript calculation
body: <p>I created (build on template) a simple js form. Everything is working with "radio" and "select" input, but i cant connect a "range" value  for sum it with everything else. </p>
  
  <p>this how form and calculations works: (sorry for a lot of noobcode)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function showVal(newVal){
    document.getElementById("valBox").innerHTML=newVal;
  }
  
   function valNum(){
  
  var valNum = document.getElementById("valBox")
   }
  
   var cake_prices = new Array();
   cake_prices["Round6"]=9;
   cake_prices["Round8"]=11;
   cake_prices["Round10"]=12;
   
  
   var filling_prices= new Array();
   filling_prices["Yearone"]=12;
   filling_prices["Yeartwo"]=60;
   filling_prices["Yearthree"]=120;
  
  
   var billing_prices= new Array();
   billing_prices["Billone"]=100;
   billing_prices["Billtwo"]=200;
   billing_prices["Billthree"]=300;
    billing_prices["Billfour"]=400;
  billing_prices["Billfive"]=300;
  
    
    
  
  
  
  function getCakeSizePrice()
  {  
      var cakeSizePrice=0;
      //Get a reference to the form id="cakeform"
      var theForm = document.forms["cakeform"];
      //Get a reference to the cake the user Chooses name=selectedCake":
      var selectedCake = theForm.elements["selectedcake"];
      //Here since there are 4 radio buttons selectedCake.length = 4
      //We loop through each radio buttons
      for(var i = 0; i &lt; selectedCake.length; i++)
      {
          //if the radio button is checked
          if(selectedCake[i].checked)
          {
              //we set cakeSizePrice to the value of the selected radio button
              //i.e. if the user choose the 8" cake we set it to 25
              //by using the cake_prices array
              //We get the selected Items value
              //For example cake_prices["Round8".value]"
              cakeSizePrice = cake_prices[selectedCake[i].value];
              //If we get a match then we break out of this loop
              //No reason to continue if we get a match
              break;
          }
      }
      //We return the cakeSizePrice
      return cakeSizePrice;
  }
  
  
  
  
       
  function getBillingPrice()
  {
      var cakeBillingPrice=0;
      //Get a reference to the form id="cakeform"
      var theForm = document.forms["cakeform"];
      //Get a reference to the select id="filling"
       var selectedBilling = theForm.elements["billing"];
       
      //set cakeFilling Price equal to value user chose
      //For example filling_prices["Lemon".value] would be equal to 5
      cakeBillingPrice = billing_prices[selectedBilling.value];
  
      //finally we return cakeFillingPrice
      return cakeBillingPrice;
  }
  
  
  
  
  
  function calculateTotal()
  {
      //Here we get the total price by calling our function
      //Each function returns a number so by calling them we add the values they return together
      var cakePrice = (getCakeSizePrice() + getBillingPrice()) * valNum();
      var num = (cakePrice);
      var miPrice = parseInt (num - (num * .35));
      var miDiff = parseInt(cakePrice - miPrice);
      
      //display the result
      var divobj = document.getElementById('totalPrice');
      divobj.style.display='block';
      divobj.innerHTML = "Total "+cakePrice;
  
      var divobj = document.getElementById('miPrice');
      divobj.style.display='block';
      divobj.innerHTML = "Total "+miPrice;
  
  
      var divobj = document.getElementById('miDiff');
      divobj.style.display='block';
      divobj.innerHTML = "Total "+miDiff;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/&gt;
      &lt;title&gt;Cake Form&lt;/title&gt;
      &lt;script type="text/javascript" src="js/formcalculations.js"&gt;&lt;/script&gt;
      &lt;link href="styles/cakeform.css" rel="stylesheet" type="text/css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="wrap"&gt;
          &lt;form action="" id="cakeform" onsubmit="return false;"&gt;
          &lt;div&gt;
              &lt;div class="cont_order"&gt;
                 &lt;fieldset&gt;
  
                  &lt;label &gt;Select your province&lt;/label&gt;
                  &lt;label class='radiolabel'&gt;&lt;input type="radio"  name="selectedcake" value="Round6" onclick="calculateTotal()" /&gt;SASKATCHEWAN&lt;/label&gt;&lt;br/&gt;
                  &lt;label class='radiolabel'&gt;&lt;input type="radio"  name="selectedcake" value="Round8" onclick="calculateTotal()" /&gt;MANITOBA&lt;/label&gt;&lt;br/&gt;
                  &lt;label class='radiolabel'&gt;&lt;input type="radio"  name="selectedcake" value="Round10" onclick="calculateTotal()" /&gt;ALBERTA&lt;/label&gt;&lt;br/&gt;
                  &lt;br/&gt;
  
                  &lt;br/&gt;
                  &lt;br&gt;
  
                  
                  &lt;/br&gt;
                  
                  &lt;label &gt;BILL&lt;/label&gt;
           
                  &lt;select id="billing" name='billing' onchange="calculateTotal()"&gt;
                  &lt;option value="Billone"&gt;100&lt;/option&gt;
                  &lt;option value="Billtwo"&gt;200&lt;/option&gt;
                  &lt;option value="Billthree"&gt;300&lt;/option&gt;
                  &lt;option value="Billfour"&gt;400&lt;/option&gt;
                  &lt;option value="Billfive"&gt;500&lt;/option&gt;
                 &lt;/select&gt;
                  &lt;br/&gt;
  
                  &lt;label &gt;TOTAL WITH UTILITY&lt;/label&gt;
                  &lt;div id="totalPrice"&gt;&lt;/div&gt;
                  
  
  
                  &lt;label &gt;TOTAL WITH MI&lt;/label&gt;
                  &lt;div id="miPrice"&gt;&lt;/div&gt;
  
                  &lt;label &gt;TOTAL SAVED&lt;/label&gt;
                  &lt;div id="miDiff"&gt;&lt;/div&gt;
                  &lt;br&gt;
  
                  &lt;span id="valBox"&gt;&lt;/span&gt;
  &lt;input type="range" min="5" max="10" step="1" 
     oninput="showVal(this.value)" onchange="showVal(this.value)"&gt;
                  &lt;/fieldset&gt;
              &lt;/div&gt;
              
          
             
          &lt;/div&gt;  
         &lt;/form&gt;
   &lt;/div&gt;&lt;!--End of wrap--&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>everything is working without "range" input and valNum (do i created it correctly?) function. 
  like if I'm doing: </p>
  
  <pre><code>function calculateTotal()
  {
      var cakePrice = (getCakeSizePrice() + getBillingPrice());
  }
  </code></pre>
  
  <p>but when I'm adding newVal function chrome showing me total: NaN;</p>
  
  <pre><code>function calculateTotal()
  {
      var cakePrice = (getCakeSizePrice() + getBillingPrice()+newVal();
  }
  </code></pre>