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提示的计算器，但出于学习的目的，我想要一些指针。问一个已被回答数百次的问题我真的很难过。对不起，我只是... .. / / p>

Answer 1

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

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

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

Answer 2

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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 个答案: