title: javascript calculator works only after refreshing the page
body: <p>I made this calculator  <a href="http://fernandor80.neocities.org/plancalc/tomx2.html" rel="nofollow">http://fernandor80.neocities.org/plancalc/tomx2.html</a></p>
  
  <p>and it always returns Nan, but once you reload it (with the previously entered inputs), it works...</p>
  
  <p>I've been looking around but I can not figure it out... So I'm here because I really want to get it to work.</p>
  
  <p>here is the code to it:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Plant Calc V1.2&lt;/title&gt;
  &lt;link rel="stylesheet" href="main.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;main&gt;
  
    &lt;form  name="plantrow" method=POST&gt;
              &lt;h1&gt;How many trays per round?&lt;/h1&gt;
              &lt;input type="text"  id="ppr"&gt;
  &lt;br&gt; 
              &lt;h1&gt;How many rows (6,10,12)?&lt;/h1&gt;
              &lt;input type="text" id="bed"&gt;
              &lt;input type="button" id="firstcalc" value="go!"     onClick="row()"&gt;
    &lt;/form&gt;
  
  &lt;br&gt;
   &lt;h2&gt;Trays per row::&lt;/h2&gt;
   &lt;h1 id="ppb"&gt;&lt;/h1&gt;
  
  
    &lt;form  name="field" method=POST&gt;
            &lt;h1&gt;Total rows in the field??&lt;/h1&gt;
            &lt;input type="text"  id="totalb"&gt;
            &lt;input type="button" id="secondcalc" value="go!" onClick="total()"&gt;
    &lt;/form&gt;
  
  &lt;h1&gt;You need:::&lt;/h1&gt;
  &lt;h1 id="totalp"&gt;&lt;/h1&gt;
  &lt;h1&gt;trays&lt;/h1&gt;
  
      &lt;div id="bins"&gt;
        45 count bins&lt;h2 id="bin45"&gt;&lt;/h2&gt;
        90 count bins&lt;h2 id="bin90"&gt;&lt;/h2&gt;
      &lt;/div&gt;
  
  
      &lt;form name="nowplants" method=POST&gt;
                &lt;h1&gt; How much plant you have now(trays)???&lt;/h1&gt;
                &lt;input type="text"  id="nowp"&gt;
                &lt;input type="button" id="thirdcalc" value="go" onClick="now()"&gt;
      &lt;/form&gt;
  
  &lt;h1&gt;You can plant ::&lt;/h1&gt;
  &lt;h1 id="nowb"&gt;&lt;/h1&gt;
  &lt;h1&gt;rows&lt;/h1&gt;
  
  &lt;/main&gt;
  
  
  &lt;script language="JavaScript"&gt;
  
  var ppr = parseFloat(document.getElementById("ppr").value);
  var bed = parseFloat(document.getElementById("bed").value);
  var ppb = ppr/bed ;
  
  var totalb = parseFloat(document.getElementById("totalb").value);
  var totalp = totalb * ppb;
  
  var bin45 = totalp/45 ;
  var bin90 = totalp/90 ;
  
  var nowp = document.getElementById("nowp").value;
  var nowb = nowp/ppb ;
  
  
  function row(){
  document.getElementById("ppb").innerHTML = ppb;
   }
  
   function total(){
  document.getElementById("totalp").innerHTML = totalp;
  document.getElementById("bin45").innerHTML = bin45;
  document.getElementById("bin90").innerHTML = bin90;
   }
  
  function now(){
  document.getElementById("nowb").innerHTML = nowb;
  }       
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Also it doesnt work on mobile devices..I made a pure javascript prompt based calculator for that, but for the purpose of learning i would like some pointers.
  I really feel bad about asking a question thats been answered hundreds of times. Sorry, I just had to..    </p>