I am trying to create a basic HTML/JavaScript BMI calculator.
There should be a message shown underneath: your bmi is:, and then the message underneath is this means you are: according to the BMI calculated above.
Please can someone help me fix my calculator, I know there are problems with my if statements? Thanks.
Less than 18.5 Underweight
18.5 to 25 Normal
25-30 Overweight
More than 30 Obese
.
<html>
<head>
<title>BMI Calculator</title>
<script type="text/javascript">
function puteBMI()
{
//Obtain user inputs
var height=Number(document.getElementById("height").value);
var heightunits=document.getElementById("heightunits").value;
var weight=Number(document.getElementById("weight").value);
var weightunits=document.getElementById("weightunits").value;
//Convert all units to metric
if (heightunits=="inches") height/=39.3700787;
if (weightunits=="lb") weight/=2.20462;
//Perform calculation
var BMI=weight/Math.pow(height,2);
//Display result of calculation
document.getElementById("output").innerText=Math.round(BMI*100)/100;
if (output<18.5)
document.getElementById("ment").value = "Underweight";
if (output>=18.5 && output<=25)
document.getElementById("ment").value = "Normal";
if (output>=25 && output<=30)
document.getElementById("ment").value = "Obese";
if (output>30)
document.getElementById("ment").value = "Overweight";
document.getElementById("answer").value = output;
}
</script>
</head>
<body>
<h1>Body Mass Index Calculator</h1>
<p>Enter your height: <input type="text" id="height"/>
<select type="multiple" id="heightunits">
<option value="metres" selected="selected">metres</option>
<option value="inches">inches</option>
</select>
</p>
<p>Enter your weight: <input type="text" id="weight"/>
<select type="multiple" id="weightunits">
<option value="kg" selected="selected">kilograms</option>
<option value="lb">pounds</option>
</select>
</p>
<input type="submit" value="puteBMI" onclick="puteBMI();">
<h1>Your BMI is: <span id="output">?</span></h1>
<h2>This means you are: value = "output" </h2>
</body>
I am trying to create a basic HTML/JavaScript BMI calculator.
There should be a message shown underneath: your bmi is:, and then the message underneath is this means you are: according to the BMI calculated above.
Please can someone help me fix my calculator, I know there are problems with my if statements? Thanks.
Less than 18.5 Underweight
18.5 to 25 Normal
25-30 Overweight
More than 30 Obese
.
<html>
<head>
<title>BMI Calculator</title>
<script type="text/javascript">
function puteBMI()
{
//Obtain user inputs
var height=Number(document.getElementById("height").value);
var heightunits=document.getElementById("heightunits").value;
var weight=Number(document.getElementById("weight").value);
var weightunits=document.getElementById("weightunits").value;
//Convert all units to metric
if (heightunits=="inches") height/=39.3700787;
if (weightunits=="lb") weight/=2.20462;
//Perform calculation
var BMI=weight/Math.pow(height,2);
//Display result of calculation
document.getElementById("output").innerText=Math.round(BMI*100)/100;
if (output<18.5)
document.getElementById("ment").value = "Underweight";
if (output>=18.5 && output<=25)
document.getElementById("ment").value = "Normal";
if (output>=25 && output<=30)
document.getElementById("ment").value = "Obese";
if (output>30)
document.getElementById("ment").value = "Overweight";
document.getElementById("answer").value = output;
}
</script>
</head>
<body>
<h1>Body Mass Index Calculator</h1>
<p>Enter your height: <input type="text" id="height"/>
<select type="multiple" id="heightunits">
<option value="metres" selected="selected">metres</option>
<option value="inches">inches</option>
</select>
</p>
<p>Enter your weight: <input type="text" id="weight"/>
<select type="multiple" id="weightunits">
<option value="kg" selected="selected">kilograms</option>
<option value="lb">pounds</option>
</select>
</p>
<input type="submit" value="puteBMI" onclick="puteBMI();">
<h1>Your BMI is: <span id="output">?</span></h1>
<h2>This means you are: value = "output" </h2>
</body>
- Create a fiddle please – tewathia Commented Feb 11, 2014 at 9:39
5 Answers
Reset to default 2hi i forgot to say :D it will work and you can find your problem in line 23 (in the first answer edit :D ) good luck
<!DOCTYPE html>
<html>
<head>
<title>BMI Calculator</title>
<script type="text/javascript">
function puteBMI() {
// user inputs
var height = Number(document.getElementById("height").value);
var heightunits = document.getElementById("heightunits").value;
var weight = Number(document.getElementById("weight").value);
var weightunits = document.getElementById("weightunits").value;
//Convert all units to metric
if (heightunits == "inches") height /= 39.3700787;
if (weightunits == "lb") weight /= 2.20462;
//Perform calculation
// var BMI = weight /Math.pow(height, 2)*10000;
var BMI = Math.round(weight / Math.pow(height, 2) * 10000);
//Display result of calculation
document.getElementById("output").innerText = Math.round(BMI * 100) / 100;
var output = Math.round(BMI * 100) / 100
if (output < 18.5)
document.getElementById("ment").innerText = "Underweight";
else if (output >= 18.5 && output <= 25)
document.getElementById("ment").innerText = "Normal";
else if (output >= 25 && output <= 30)
document.getElementById("ment").innerText = "Obese";
else if (output > 30)
document.getElementById("ment").innerText = "Overweight";
// document.getElementById("answer").value = output;
}
</script>`enter code here`
</head>
<body>
<h1>Body Mass Index Calculator</h1>
<p>Enter your height: <input type="text" id="height"/>
<select type="multiple" id="heightunits">
<option value="metres" selected="selected">metres</option>
<option value="inches">inches</option>
</select>
</p>
<p>Enter your weight: <input type="text" id="weight"/>
<select type="multiple" id="weightunits">
<option value="kg" selected="selected">kilograms</option>
<option value="lb">pounds</option>
</select>
</p>
<input type="submit" value="puteBMI" onclick="puteBMI();">
<h1>Your BMI is: <span id="output">?</span></h1>
<h2>This means you are: <span id="ment"> ?</span> </h2>
</body>
</html> <html>
<head>
<title>BMI Calculator</title>
<script type="text/javascript">
function puteBMI()
{
//Obtain user inputs
var height=Number(document.getElementById("height").value);
var heightunits=document.getElementById("heightunits").value;
var weight=Number(document.getElementById("weight").value);
var weightunits=document.getElementById("weightunits").value;
//Convert all units to metric
if (heightunits=="inches") height/=39.3700787;
if (weightunits=="lb") weight/=2.20462;
//Perform calculation
var BMI=weight/Math.pow(height,2);
//Display result of calculation
document.getElementById("output").innerText=Math.round(BMI*100)/100;
var output = Math.round(BMI*100)/100
if (output<18.5)
document.getElementById("ment").innerText = "Underweight";
else if (output>=18.5 && output<=25)
document.getElementById("ment").innerText = "Normal";
else if (output>=25 && output<=30)
document.getElementById("ment").innerText = "Obese";
else if (output>30)
document.getElementById("ment").innerText = "Overweight";
// document.getElementById("answer").value = output;
}
</script>
</head>
<body>
<h1>Body Mass Index Calculator</h1>
<p>Enter your height: <input type="text" id="height"/>
<select type="multiple" id="heightunits">
<option value="metres" selected="selected">metres</option>
<option value="inches">inches</option>
</select>
</p>
<p>Enter your weight: <input type="text" id="weight"/>
<select type="multiple" id="weightunits">
<option value="kg" selected="selected">kilograms</option>
<option value="lb">pounds</option>
</select>
</p>
<input type="submit" value="puteBMI" onclick="puteBMI();">
<h1>Your BMI is: <span id="output">?</span></h1>
<h2>This means you are: <span id="ment"> ?</span> </h2>
</body>
This should work. The things wrong with what you have done , is that the var output is not assigned any value. and document.getElementById("ment") results in an empty set(null), hence the error : Cannot set property value of null . And i don't understand what you wish to acplish by the statement document.getElementById("answer").value = output so unless you explain that, i have mented it.
I have made some changes to your code ..
Check whether it works for you.
good luck
<html>
<head>
<title>BMI Calculator</title>
<script type="text/javascript">
function puteBMI() {
//Obtain user inputs
var height = Number(document.getElementById("height").value);
var heightunits = document.getElementById("heightunits").value;
var weight = Number(document.getElementById("weight").value);
var weightunits = document.getElementById("weightunits").value;
//Convert all units to metric
if (heightunits == "inches") height /= 39.3700787;
if (weightunits == "lb") weight /= 2.20462;
//Perform calculation
var BMI = weight / Math.pow(height, 2);
//Display result of calculation
document.getElementById("output").innerHTML = Math.round(BMI * 100)/100;
if (BMI < 18.5) document.getElementById("ment").innerHTML = "Underweight";
if (BMI >= 18.5 && BMI <= 25) document.getElementById("ment").innerHTML = "Normal";
if (BMI >= 25 && BMI <= 30) document.getElementById("ment").innerHTML = "Obese";
if (BMI > 30) document.getElementById("ment").innerHTML = "Overweight";
}
}
</script>
</head>
<body>
<h1>Body Mass Index Calculator</h1>
<p>Enter your height:
<input type="text" id="height" />
<select type="multiple" id="heightunits">
<option value="metres" selected="selected">metres</option>
<option value="inches">inches</option>
</select>
</p>
<p>Enter your weight:
<input type="text" id="weight" />
<select type="multiple" id="weightunits">
<option value="kg" selected="selected">kilograms</option>
<option value="lb">pounds</option>
</select>
</p>
<input type="button" value="puteBMI" onclick="puteBMI()"/>
<h1>Your BMI is: <span id="output">?</span></h1>
<h2>This means you are: value = <span id='ment'></span> </h2>
</body>
</html>
Here is my fiddle JSFIDDLE
You cannot use like document.getElementById("ment").value = "Underweight";
Use the same like document.getElementById("ment").innerHTML = "Underweight";
//innerHTML property is used to set the inner text of the span here.
.value will work if it is a text field but not for span
I am not sure your formula is correct.
At this point your formula is Weight/(height^2)
It should be Weight/(height^2)*703
"It should be Weight/(height^2)*703"
That's for English not for Metric but seeing as everything is being coverted to Metric, it's not needed.
BMI calculation is still incorrect as it shows mine as some number in the 380 thousands.