javascript计算器仅在刷新页面后才有效

Question

I made this calculator http://fernandor80.neocities.org/plancalc/tomx2.html 我制作了这个计算器http://fernandor80.neocities.org/plancalc/tomx2.html

and it always returns Nan, but once you reload it (with the previously entered inputs), it works... 并且它总是返回Nan，但是一旦你重新加载它（使用先前输入的输入），它就可以...

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. 它也不适用于移动设备..我为此制作了一个纯粹的基于javascript提示的计算器，但为了学习的目的，我想要一些指针。 I really feel bad about asking a question thats been answered hundreds of times. 问一个已被回答数百次的问题我真的很难过。 Sorry, I just had to.. 抱歉，我不得不..

Answer 1

the values of ppr , bed , and ppb are calculated when the page first loads. 首次加载页面时，将计算ppr ， bed和ppb的值。 Thus it's a NaN . 因此它是一个NaN 。

You should consider move at least the data retrieval and calculation inside function row() . 您应该考虑至少移动函数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. 调试此类问题的一种简单方法是，如果您不使用任何IDE，则在浏览器中按f12并打开开发模式，您可以在其中设置断点并检查变量的当前值。

Answer 2

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>

Answer 3

It will always NaN because your call values of ppr, bed, and ppb when just first page loaded ! 它总是NaN因为你的第一页加载时你的ppr，bed和ppb的调用值！ 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... 在那个页面加载的时候，你没有任何值，所以NaN 。所以当你点击时，你应该再次调用该值，使其功能调用值会更好...

here I push init() to get value onclick 在这里我推送init（）来获取值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计算器仅在刷新页面后才有效

问题描述

3 个解决方案

解决方案1
2 2016-05-20 04:08:30

解决方案2
1 已采纳 2016-05-20 04:19:44

解决方案3
0 2016-05-20 04:17:58

javascript计算器仅在刷新页面后才有效

问题描述

3 个解决方案

解决方案1 2 2016-05-20 04:08:30

解决方案2 1 已采纳 2016-05-20 04:19:44

解决方案3 0 2016-05-20 04:17:58

解决方案1
2 2016-05-20 04:08:30

解决方案2
1 已采纳 2016-05-20 04:19:44

解决方案3
0 2016-05-20 04:17:58