user2110655
user2110655

Reputation:

Javascript 'NaN' on calculate

I am new to javascript and trying to make a basic BMI calculator. But I must be doing something wrong as it displays 'NaN' when I click on calculate. Any ideas out there? Thanks

<!DOCTYPE html>
<html>
<body>

<form>
Height: <input id="h" type="text" name="height"><br>
Weight: <input id="w" type="text" name="weight">
</form>

<button onclick="myFunction()">Calculate</button>

<p id="bmi"></p>

<script>
function myFunction()
{
var h;
var w;
var x=Math.round(w/(h*h));
var demoP=document.getElementById("bmi")
demoP.innerHTML="Your BMI is: " + x;
}
</script>

</body>
</html>

Upvotes: 1

Views: 209

Answers (6)

Alex
Alex

Reputation: 11245

Try this:

function myFunction() {
    var h = document.getElementById("h").value;
    var w = document.getElementById("w").value;
    var demoP = document.getElementById("bmi");
    var x;

    //checking are h and w numbers
    if (isNaN(h) || isNaN(w)) {
        x = 'Bad value';
    } else {
        x = Math.round(w/(h*h));
    }

    demoP.innerHTML="Your BMI is: " + x;
}

Upvotes: 2

Krish R
Krish R

Reputation: 22711

Try this,

Added

var h = document.getElementById("h").value; 

var w = document.getElementById("w").value;

Jaavscript:

    function myFunction()
    {
        var h = document.getElementById("h").value;
        var w = document.getElementById("w").value;
        if((h!="" && isNaN(h)) && (w!="" && isNaN(w) ){
            var x=Math.round(w/(h*h));
            var demoP=document.getElementById("bmi");
           demoP.innerHTML="Your BMI is: " + x; 
         }
    }

Upvotes: 1

Sanjay Nagare
Sanjay Nagare

Reputation: 440

var h = document.getElementById("h").value;
var w = document.getElementById("w").value;

Please initialize value of h and w using above code.acknowledge user2110655

Upvotes: 2

Vlad Nikitin
Vlad Nikitin

Reputation: 1951

some changes:

var h = document.getElementById("h").value;
var w = document.getElementById("w").value;

Upvotes: 1

Shyam
Shyam

Reputation: 792

Try these vars :

var h = parseInt(document.getElementById('h').value());
var w = parseInt(document.getElementById('w').value());

Upvotes: 0

gaurav5430
gaurav5430

Reputation: 13892

var h;
var w;
var x=Math.round(w/(h*h));

h and w have not been initialized. hence X is not a number.

Upvotes: 0

Related Questions