Einfache Funktion NaN in Javascript

Question

Hier ist mein Skript:

function milesRun(){ 
var run1 = document.getElementById("runDist1").value; 
var run2 = document.getElementById("runDist2").value; 
var run3 = document.getElementById("runDist3").value; 
var stepInches = document.getElementById("steplength").value; 
var stepsRun = run1*1 + run2*1 + run3*1; 
var milesRun = (stepsRun*1) * .0000157828 * (stepInches*1); 
milesRun = milesRun.toFixed(2); 
document.getElementById("milesIRun").innerHTML = milesRun; 
} 
function caloriesBurntMale(){ 
    calories = milesRun*1 * 124; 
    calories = calories.toFixed(2); 
    document.getElementById("calsMen").innerHTML = calories; 
} 
function caloriesBurntFemale(){ 
    calories = milesRun*1 * 105; 
    calories = calories.toFixed(2); 
    document.getElementById("calsWomen").innerHTML = calories; 
} 

I NaN mit meiner caloriesBurntFemale Funktion und meine caloriesBurntMale Funktion zurückkehre. Wie stelle ich sicher, dass ich in diesen beiden Funktionen eine Nummer anstelle von NaN bekomme?

Answer 1

Variable milesRun ist in der Funktion milesRun deklariert .So Funktion caloriesBurntMale kann nicht zugreifen, da in js Bereich einer Variablen auf Funktionsebene ist.

In diesem Fall können Sie die Variable außerhalb der Funktion erklären kann, so dass sie von anderen Funktion

var milesRun=''; 
function milesRun(){ 
    //rest of the code 
milesRun = (stepsRun*1) * .0000157828 * (stepInches*1).toFixed(2); 
document.getElementById("milesIRun").innerHTML = milesRun; 
} 
function caloriesBurntMale(){ 
    calories = milesRun*1 * 124; 
} 

Answer 2

zwei Probleme sind Es zugegriffen werden kann; Eine davon ist, dass Ihre Variable 'milesRun' in einer Funktion deklariert ist (die verwirrenderweise auch 'milesRun' genannt wird) und daher für Ihre anderen Funktionen nicht verfügbar ist, wenn sie versuchen, darauf zuzugreifen.

Das andere ist, wie Sie versuchen, Zeichenfolgen in Zahlen (foo*1) zu konvertieren, die NaN weiterhin ergeben, wenn nicht-numerische Eingabe zugeführt wird.

I neigen dazu, diese Technik zu verwenden, die eine Reihe möglichst zurückgibt, oder Null (wenn der Eingang nicht numerisch ist):

Number(foo) || 0; 

(Eine äquivalente Kurzschrift ist +foo || 0, aber das kann verwirrend sein, lese; Ich denke, es ist die zusätzlichen Tastenanschläge wert, um zu verdeutlichen, dass du eine Nummer machst. Leute werden oft parseInt() vorschlagen, was in Ordnung ist, wenn du Ganzzahlen anstelle von Zahlen willst (aber vergiss nicht, das Radix mit aufzunehmen!) parseFloat() ist eine andere Option, es gibt einige differences zwischen Number und parseFloat, die je nach Ihren Bedürfnissen mehr als die anderen machen können.)

Wie auch immer: Ende der Exkurs, hier ist ein Beispiel, das diese Technik verwendet, und übergibt die Variable MilesRun als Parameter an die anderen Funktionen. Ich habe auch die milesRun() Funktion umbenannt - streng genommen ist dies nicht notwendig, solange die Variable mit dem gleichen Namen immer in einem Funktionsumfang enthalten ist, aber das Duplizieren von Namen ist sicher, Verwirrung zu verursachen, also am besten, es zu vermeiden.

function milesRunFn() { 
 
    var run1 = Number(document.getElementById("runDist1").value) || 0; 
 
    var run2 = Number(document.getElementById("runDist2").value) || 0; 
 
    var run3 = Number(document.getElementById("runDist3").value) || 0; 
 
    var stepInches = Number(document.getElementById("steplength").value) || 0; 
 
    
 
    var stepsRun = run1 + run2 + run3; 
 
    var milesRun = stepsRun * .0000157828 * stepInches; 
 
    milesRun = milesRun.toFixed(2); 
 
    document.getElementById("milesIRun").innerHTML = milesRun; 
 

 
    caloriesBurntMale(milesRun); 
 
    caloriesBurntFemale(milesRun); 
 
} 
 

 
function caloriesBurntMale(milesRun){ 
 
    calories = milesRun * 124; 
 
    calories = calories.toFixed(2); 
 
    document.getElementById("calsMen").innerHTML = calories; 
 
} 
 
function caloriesBurntFemale(milesRun){ 
 
    calories = milesRun * 105; 
 
    calories = calories.toFixed(2); 
 
    document.getElementById("calsWomen").innerHTML = calories; 
 
}

R1: <input id="runDist1"><br> 
 
R2: <input id="runDist2"><br> 
 
R3: <input id="runDist3"><br> 
 
Step: <input id="steplength"><br> 
 

 
<button onclick="milesRunFn()">Go</button><br> 
 
Miles run:<span id="milesIRun"></span><br> 
 

 
Women: <span id="calsWomen"></span><br> 
 
Men: <span id="calsMen"></span><br>

(Sie auch var milesRun im globalen Bereich erklärt haben könnte, so dass alle Funktionen auf sie zugreifen können, aber Parameter übergeben ist wahrscheinlich ein besserer Ansatz.)