Reputation:
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
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
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
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
Reputation: 1951
some changes:
var h = document.getElementById("h").value;
var w = document.getElementById("w").value;
Upvotes: 1
Reputation: 792
var h = parseInt(document.getElementById('h').value());
var w = parseInt(document.getElementById('w').value());
Upvotes: 0
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