Javascript 中的简单函数 NaN

Question

这是我的脚本：

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

我用 caloriesBurntFemale 函数和 caloriesBurntMale 函数返回 NaN。如何确保在这两个函数中得到的是数字而不是 NaN？

Answer 1

变量 milesRun 在函数 milesRun 中声明。因此函数 caloriesBurntMale 将无法访问它，因为在 js 中变量的作用域处于函数级别。

在这种情况下，您可以在函数外部声明变量，以便可以从其他函数访问它

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

有两个问题；一个是您的 'milesRun' 变量是在函数内部声明的（令人困惑的是，它也被命名为 'milesRun'），因此当其他函数尝试访问它时，它们将无法使用。

另一个是您尝试将字符串转换为数字 (foo*1) 的方式，如果输入非数字，这仍将导致 NaN。

我倾向于使用这种技术，returns 如果可能的话，一个数字，或者零（如果输入不是数字）：

Number(foo) || 0;

（等价的 shorthand 是 +foo || 0，但读起来可能会造成混淆；我认为值得多敲几下键盘来让你清楚地知道你在输入一个数字。人们通常会建议改为 parseInt()，如果你想要整数而不是数字，这很好（但不要忘记包括基数！）parseFloat() 是另一种选择；数字和之间有一些 differences parseFloat，这可能会根据您的需要使一个比另一个更合适。）

无论如何：题外话结束，这是一个使用该技术并将 milesRun 变量作为参数传递给其他函数的示例。我还重命名了 milesRun() 函数——严格来说这不是必需的，只要具有相同名称的变量始终包含在函数范围内，但重复名称肯定会引起混淆，因此最好避免它。

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>

（您也可以在全局范围内声明 var milesRun，这样所有函数都可以访问它，但传递参数可能是更好的方法。）

Javascript 中的简单函数 NaN

Simple function NaN in Javascript

javascript

nan