只刷新頁面

我做了這個計算器http://fernandor80.neocities.org/plancalc/tomx2.html 只刷新頁面

，它總是返回楠，但一旦你重新加載它（與以前輸入的輸入），它的工作原理...

我以後的JavaScript計算器的工作原理我一直在四處尋找，但我無法弄清楚......所以我來到這裏是因爲我真的想讓它工作。

這裏是代碼到它：

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

而且它不工作在移動devices..I提出了一個純JavaScript提示基於計算器，但對於學習的目的，我想一些指點。我真的很難過問一個問題已經回答了幾百次。對不起，我只需要...

來源

2016-05-20 ferby

你是什麼意思_ 「重裝後的作品」 _？一旦頁面被卸載，JavaScript就失去控制！ – Rayon

我認爲瀏覽器會緩存您的表單輸入，並在重新加載後使此功能起作用。見細節這個問題，http://stackoverflow.com/questions/2699284/make-page-to-tell-browser-not-to-cache-preserve-input-values – KuN

你有沒有考慮過這樣做的邏輯服務器端？對我而言，它比Javascript更容易，並且隱藏了你的代碼。 –

你必須在每一個功能比其他變量的依賴性。而不是使用全局變量，您可以訪問每個函數中的值。

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>

來源

2016-05-20 04:19:44 Rayon

ppr,bed和ppb的值是在頁面第一次加載時計算的。因此它是一個NaN。

你應該考慮移動內部功能row()至少數據檢索和計算。

一個簡單的方法來調試問題這樣的，如果你不使用任何IDE，它在你的瀏覽器並打開開發模式，您可以設置斷點和檢查變量的當前值按F12鍵。

來源

2016-05-20 04:08:30 KuN

我只是想提到計算應該在一個函數中。 –

它總是NaN因爲PPR，牀，PPB的呼叫值時，只加載第一頁！在那個頁面加載的時候，你沒有任何價值，所以NaN getting.So當你點擊，你應該再次調用該值，使其功能調用值將會更好...

這裏我推的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>

來源

2016-05-20 04:17:58

回答

相關問題