javascript calculator works only after refreshing the page

Question

I made this calculator http://fernandor80.neocities.org/plancalc/tomx2.html

and it always returns Nan, but once you reload it (with the previously entered inputs), it works...

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.

here is the code to it:

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Plant Calc V1.2</title>
<link rel="stylesheet" href="main.css">
</head>

<body>
<main>

  <form  name="plantrow" method=POST>
            <h1>How many trays per round?</h1>
            <input type="text"  id="ppr">
<br> 
            <h1>How many rows (6,10,12)?</h1>
            <input type="text" id="bed">
            <input type="button" id="firstcalc" value="go!"     onClick="row()">
  </form>

<br>
 <h2>Trays per row::</h2>
 <h1 id="ppb"></h1>


  <form  name="field" method=POST>
          <h1>Total rows in the field??</h1>
          <input type="text"  id="totalb">
          <input type="button" id="secondcalc" value="go!" onClick="total()">
  </form>

<h1>You need:::</h1>
<h1 id="totalp"></h1>
<h1>trays</h1>

    <div id="bins">
      45 count bins<h2 id="bin45"></h2>
      90 count bins<h2 id="bin90"></h2>
    </div>


    <form name="nowplants" method=POST>
              <h1> How much plant you have now(trays)???</h1>
              <input type="text"  id="nowp">
              <input type="button" id="thirdcalc" value="go" onClick="now()">
    </form>

<h1>You can plant ::</h1>
<h1 id="nowb"></h1>
<h1>rows</h1>

</main>


<script language="JavaScript">

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;
}       
</script>
</body>
</html>

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..

What do you mean by _"works after reload"_ ? JavaScript loses its control once the page is unloaded! — Rayon, May 20 '16 at 04:05
I think browser caches your form input and make this function works after reload. See this question for detail, http://stackoverflow.com/questions/2699284/make-page-to-tell-browser-not-to-cache-preserve-input-values — KuN, May 20 '16 at 04:15
Have you considered doing the logic server side? For me it's easier than Javascript plus your code is hidden. — Michael Z., May 20 '16 at 04:15

score 2 · Answer 1 · answered May 20 '16 at 04:08

2

the values of ppr, bed, and ppb are calculated when the page first loads. Thus it's a NaN.

You should consider move at least the data retrieval and calculation inside function row().

One simple way to debug issue like this, if you don't use any IDE, it to press f12 in your browser and open dev mode where you can set break point and check the current value of your variables.

answered May 20 '16 at 04:08

KuN

1,143
18
23

I was just going to mention the calculations should be in a function. – Michael Z. May 20 '16 at 04:11

score 1 · Accepted Answer · answered May 20 '16 at 04:19

You have dependency over other variable in every function. Instead of using global variables, you can access value in each function.

function row() {
  var ppr = parseFloat(document.getElementById("ppr").value);
  var bed = parseFloat(document.getElementById("bed").value);
  var ppb = ppr / bed;
  document.getElementById("ppb").innerHTML = ppb;
}

function total() {
  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;
  document.getElementById("totalp").innerHTML = totalp;
  document.getElementById("bin45").innerHTML = bin45;
  document.getElementById("bin90").innerHTML = bin90;
}

function now() {
  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;
  document.getElementById("nowb").innerHTML = nowb;
}

<main>
  <form name="plantrow" method=POST>
    <h1>How many trays per round?</h1>
    <input type="text" id="ppr">
    <br>
    <h1>How many rows (6,10,12)?</h1>
    <input type="text" id="bed">
    <input type="button" id="firstcalc" value="go!" onClick="row()">
  </form>
  <br>
  <h2>Trays per row::</h2>
  <h1 id="ppb"></h1>
  <form name="field" method=POST>
    <h1>Total rows in the field??</h1>
    <input type="text" id="totalb">
    <input type="button" id="secondcalc" value="go!" onClick="total()">
  </form>

  <h1>You need:::</h1>
  <h1 id="totalp"></h1>
  <h1>trays</h1>

  <div id="bins">
    45 count bins
    <h2 id="bin45"></h2>
    90 count bins
    <h2 id="bin90"></h2>
  </div>


  <form name="nowplants" method=POST>
    <h1> How much plant you have now(trays)???</h1>
    <input type="text" id="nowp">
    <input type="button" id="thirdcalc" value="go" onClick="now()">
  </form>

  <h1>You can plant ::</h1>
  <h1 id="nowb"></h1>
  <h1>rows</h1>

</main>

score 0 · Answer 3 · answered May 20 '16 at 04:17

It will always NaN because your call values of ppr, bed, and ppb when just first page loaded ! At that page loaded time ,you didn't have any value so NaN getting.So when you click ,you should call that value again ,make it function to call values will be more better...

here I push init() to get value onclick

<script type="text/javascript">
var ppr,bed,ppb,totalp,totalb,bin45,bin90,nowb,nowb;
function init(){
 ppr = parseFloat(document.getElementById("ppr").value);
 bed = parseFloat(document.getElementById("bed").value);
 ppb = ppr/bed ;

totalb = parseFloat(document.getElementById("totalb").value);
totalp = totalb * ppb;

bin45 = totalp/45 ;
bin90 = totalp/90 ;

nowp = document.getElementById("nowp").value;
nowb = nowp/ppb ;
}

function row(){ 
init();
document.getElementById("ppb").innerHTML = ppb;
 }    

</script>

javascript calculator works only after refreshing the page

3 Answers3