CODEWITHSUNDEEP
javascriptnan
John Mann
John Mann

Reputation: 83

Simple function NaN in Javascript

Here is my script:

  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 am returning NaN with my caloriesBurntFemale function and my caloriesBurntMale function. How do I ensure that I get a number rather than NaN in these two functions?

Upvotes: 0

Views: 63

Answers (2)

Daniel Beck
Daniel Beck

Reputation: 21475

There are two problems; one is that your 'milesRun' variable is declared inside a function (which is confusingly also named 'milesRun') so isn't available to your other functions when they try to access it.

The other is how you're trying to convert strings into numbers (foo*1), which will still result in NaN if fed non-numeric input.

I tend to use this technique, which returns a number if possible, or zero (if the input isn't numeric):

Number(foo) || 0;

(An equivalent shorthand is +foo || 0, but that can be confusing to read; I think it's worth the extra keystrokes to make it obvious that you're making a number. People will often suggest parseInt() instead, which is fine if you wanted integers instead of numbers (but don't forget to include the radix!) parseFloat() is another option; there are some differences between Number and parseFloat which may make one more suitable than the other depending on your needs.)

Anyway: end of digression, here's an example which uses that technique, and passes the milesRun variable as a parameter to the other functions. I also renamed the milesRun() function -- strictly speaking this isn't necessary as long as the variable with the same name is always contained inside a function scope, but duplicating names is certain to cause confusion so best to avoid it.

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>

(You could also have declared var milesRun at global scope, so all the functions could access it, but passing parameters is probably a better approach.)

Upvotes: 1

brk
brk

Reputation: 50291

variable milesRun is declared inside the function milesRun.So function caloriesBurntMale will not able to access it since in js scope of a variable is at function level.

In this case you can declare the variable outside the function so that it can be accessed from other function

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

Upvotes: 1

Related Questions