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

Question

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

并且它总是返回Nan，但是一旦你重新加载它（使用先前输入的输入），它就可以...

我一直在环顾四周，但我无法理解......所以我在这里因为我真的想让它发挥作用。

这是代码：

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

它也不适用于移动设备..我为此制作了一个纯粹的基于javascript提示的计算器，但为了学习的目的，我想要一些指针。 问一个已被回答数百次的问题我真的很难过。 抱歉，我不得不..

Answer 1

首次加载页面时，将计算ppr ， bed和ppb的值。 因此它是一个NaN 。

您应该考虑至少移动函数row()的数据检索和计算。

调试此类问题的一种简单方法是，如果您不使用任何IDE，则在浏览器中按f12并打开开发模式，您可以在其中设置断点并检查变量的当前值。

Answer 2

您在每个函数中都依赖于其他变量。 您可以在每个函数中访问值，而不是使用全局变量。

 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

它总是NaN因为你的第一页加载时你的ppr，bed和ppb的调用值！ 在那个页面加载的时候，你没有任何值，所以NaN 。所以当你点击时，你应该再次调用该值，使其功能调用值会更好...

在这里我推送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