Javascript Rechner funktioniert nur nach dem Aktualisieren der Seite

ich diesen Rechner gemacht http://fernandor80.neocities.org/plancalc/tomx2.html Javascript Rechner funktioniert nur nach dem Aktualisieren der Seite

und es Nan immer wieder, aber wenn Sie es neu zu laden (mit den zuvor eingegebenen Eingänge), es funktioniert ...

I‘ Ich schaue mich um, aber ich kann es nicht herausfinden ... Also bin ich hier, weil ich es wirklich zur Arbeit bringen will.

hier ist der Code, um es:

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

es tut sich auch die Arbeit an mobilen devices..I eine reine Javascript prompt basierter Rechner für das gemacht, aber für den Zweck des Lernens würde ich einige Hinweise mögen. Ich fühle mich wirklich schlecht, wenn ich eine Frage stelle, die hunderte Male beantwortet wurde. Entschuldigung, ich musste einfach ..

Quelle

2016-05-20 ferby

Was meinst du mit _ "arbeitet nach dem Neuladen" _? JavaScript verliert seine Kontrolle, sobald die Seite entladen ist! – Rayon

Ich denke, Browser zwischenspeichert Ihre Formulareingabe und diese Funktion funktioniert nach dem Neuladen. Siehe diese Frage für Details, http://stackoverflow.com/questions/2699284/make-page-to-tell-browser-not-to-cache-preserve-input-values – KuN

Haben Sie in Betracht gezogen, die Logik-Server-Seite zu tun? Für mich ist es einfacher als Javascript und dein Code ist versteckt. –

Sie haben Abhängigkeit über andere Variable in jeder Funktion. Anstatt globale Variablen zu verwenden, können Sie auf den Wert in jeder Funktion zugreifen.

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>

Quelle

2016-05-20 04:19:44 Rayon

Die Werte von ppr, bed und ppb werden berechnet, wenn die Seite zuerst geladen wird. Also ist es ein NaN.

Sie sollten mindestens die Datenabfrage und Berechnung innerhalb der Funktion row() verschieben.

Ein einfacher Weg, um ein Problem wie dieses zu debuggen, wenn Sie keine IDE verwenden, drücken Sie f12 in Ihrem Browser und öffnen Sie den Dev-Modus, wo Sie den Haltepunkt setzen und den aktuellen Wert Ihrer Variablen überprüfen können.

Quelle

2016-05-20 04:08:30 KuN

Ich wollte nur erwähnen, dass die Berechnungen in einer Funktion sein sollten. –

Es wird immer NaN da Ihre Rufwerte von ppr, Bett und ppb wenn nur erste Seite geladen! Auf dieser Seite geladen Zeit, Sie hatten keinen Wert, so NaN bekommen.So, wenn Sie klicken, sollten Sie diesen Wert erneut aufrufen, machen es Funktion zu rufen Werte werden besser sein ...

hier drücke ich init() Wert erhalten 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>

Quelle

2016-05-20 04:17:58

Javascript Rechner funktioniert nur nach dem Aktualisieren der Seite

Antwort

Verwandte Themen