Javascript - Input Value NaN

Question

Im new to Javascript and i was doing some DOM maniputalion, and i tried to create the BMI (body mass index) calculator, which is bodyMass / ( bodyWeight * bodyWeight ).

Then i've done some code:

HTML:

var bodyMass, bodyWeight;
bodyMass = parseInt(document.getElementById("bodyMass").value, 10);
bodyWeight = parseInt(document.getElementById("bodyWeight").value, 10);
var BMI = bodyMass / (bodyWeight * bodyWeight);
document.getElementById("check").onclick = function() {
  alert(BMI);
}

<input type="text" placeholder="Body Mass" id="bodyMass">
<input type="text" placeholder="Body Weight" id="bodyWeight">
<button id="check">CHECK</button>
<div id="result"></div>

Please review How to Ask and update your post to include an actual question. — zzzzBov
– zzzzBov, Commented Aug 1, 2018 at 20:13
Are you dividing by zero? Hint: Write a function that does the calculations for you, then feed it values in a controlled way to verify it works properly before integrating with your application. — tadman
– tadman, Commented Aug 1, 2018 at 20:16
The problem is simply that you're calculating bodyMass and bodyWeight outside of the click event. Those variables get set as soon as the page loads, at which point they are empty. — Tyler Roper
– Tyler Roper, Commented Aug 1, 2018 at 20:17

Unmitigated · Accepted Answer · 2018-08-01 20:27:07Z

4

You need to calculate the body mass index when the button is clicked, not on page load. By not placing your code inside the event handler, you are calculating everything before any values are entered.

<input type="text" placeholder="Body Mass" id="bodyMass">
<input type="text" placeholder="Body Weight" id="bodyWeight">
<button id="check">CHECK</button>
<div id="result"></div>
<script>
var bodyMass, bodyWeight;

document.getElementById("check").onclick = function() {
bodyMass = parseInt(document.getElementById("bodyMass").value, 10);
bodyWeight = parseInt(document.getElementById("bodyWeight").value, 10);
var BMI = bodyMass / (bodyWeight * bodyWeight);
  alert(BMI);
}
</script>

To make sure the value is not NaN before alerting, you use isNaN.

 <input type="text" placeholder="Body Mass" id="bodyMass">
    <input type="text" placeholder="Body Weight" id="bodyWeight">
    <button id="check">CHECK</button>
    <div id="result"></div>
    <script>
    var bodyMass, bodyWeight;

    document.getElementById("check").onclick = function() {
    bodyMass = parseInt(document.getElementById("bodyMass").value, 10);
    bodyWeight = parseInt(document.getElementById("bodyWeight").value, 10);
    var BMI = bodyMass / (bodyWeight * bodyWeight);
    if(!isNaN(BMI)){
      alert(BMI);
    } else {
     alert("Please enter two valid numbers!");
    }
    }
    </script>

edited Aug 1, 2018 at 20:27

answered Aug 1, 2018 at 20:17

Unmitigated

91.4k12 gold badges102 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andre Lança Over a year ago

ohhh, so i just needed to put everything inside the function?

Unmitigated Over a year ago

@AndreLança That's it.

Stuart · Accepted Answer · 2018-08-01 20:18:46Z

You are getting the values of bodyWeigt and bodyMass even before the button is clicked, at this stage (after parseInt-ing them) they are of course not a number (NaN).

Grab the values on click of the button i.e when the user has (hopefully) entered some valid values...

document.getElementById("check").onclick = function() {
var bodyMass, bodyWeight;
bodyMass = parseInt(document.getElementById("bodyMass").value);
bodyWeight = parseInt(document.getElementById("bodyWeight").value);
var BMI = bodyMass / (bodyWeight * bodyWeight); 
  alert(BMI);
}

<input type="number" placeholder="Body Mass" id="bodyMass">
<input type="number" placeholder="Body Weight" id="bodyWeight">
<button id="check">CHECK</button>
<div id="result"></div>

onyx · Accepted Answer · 2018-08-01 20:25:44Z

-2

Because your input are numeric, you should instead do

<input type="number" placeholder="Body Mass" id="bodyMass">
<input type="number" placeholder="Body Weight" id="bodyWeight">

and place the calculation inside the button click event, else the calculation will get executed once the page loads and you will get a NaN alert.

edited Aug 1, 2018 at 20:25

answered Aug 1, 2018 at 20:16

onyx

1,62810 silver badges14 bronze badges

Collectives™ on Stack Overflow

Javascript - Input Value NaN

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related