javascript 计算器仅在刷新页面后工作

标签 javascript html

我做了这个计算器 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 提示的计算器,但出于学习目的,我想要一些指示。 提出一个已经回答了数百次的问题,我真的很难过。对不起,我不得不..

最佳答案

pprbedppb 的值是在页面首次加载时计算的。因此它是一个 NaN

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

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

关于javascript 计算器仅在刷新页面后工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37337739/

相关文章:

javascript - 在 Javascript 中实现异步展开功能

html - 如何使用 flexbox 为一个元素设置 66% 的区域,为另外两个元素设置 33% 和 33% 的区域?

javascript - 如何在父 div 中调整子 div 大小时隐藏 div

html - 如何更改在线页面的光标属性?

javascript - 如何大写第一个字母并小写字符串的其余部分

javascript - 如何获取所有浏览器cookie?

javascript - 如何在两个单元格之间拉伸(stretch)线(<td> 标签)

javascript - 从字符串中提取电子邮件地址

javascript - 当我点击其他地方时如何隐藏我的滑动sidenav?

javascript - jQuery 在单击元素时向下滚动