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。

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

Number(foo) || 0;

（一个等效的简写是+foo || 0，但这可能令人困惑;我认为值得额外的击键显示你正在制作一个数字。人们会经常建议parseInt()相反，如果你想要整数而不是数字，这很好（但不要忘记包括基数！）parseFloat()是另一种选择;在Number和parseFloat之间有一些differences可能还有一个根据您的需要，比其他更合适。）

无论如何：题外话的结尾，这是一个使用该技术的例子，并将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

2 个答案: