Javascript BMI Calculator

Question

Having trouble getting this to print anything in JSFiddle, although everything looks right to me. I'm unsure as to why HTML is not displaying the answer, but any help is welcome. Thanks!

HTML:

<h2>BMI Calculator</h2>
<p>
    Enter your weight in pounds:
    <input type="text" id="weight">
</p>

<p>
    Enter your height in inches:
    <input type="text" id="height">
</p>

<input type="button" onclick="bmiCalculator()" value="calculate">
<p id="output"></p>

Javascript:

function bmiCalculator() {
    var weight = Number(document.getElementById("weight").value);
    var height = Number(document.getElementById("height").value);
    var finalWeight = weight * .45;
    var finalHeight = height * .025;

    var BMI = (finalWeight / Math.pow(finalHeight, 2));

    document.getElementById("output").innerHTML = BMI;
}

Always use the console/debug tools. It'll save you many head aches. — Bram Vanroy, Sep 26 '16 at 08:31

score 2 · Accepted Answer · edited May 23 '17 at 12:19

2

There is a syntax error in your code (you're missing a closing parenthesis in your BMI expression). Here's the fixed code (I just added ) right where it was needed) and it seems to me to be working fine.

function bmiCalculator() {

  var weight = Number(document.getElementById("weight").value);
  var height = Number(document.getElementById("height").value);
  var finalWeight = weight * .45;
  var finalHeight = height * .025;


var BMI = (finalWeight / Math.pow(finalHeight, 2));

document.getElementById("output").innerHTML = BMI;

}

<h2>
 BMI Calculator
</h2>

<p>
  Enter your weight in pounds:
  <input type="text" id="weight">
</p>

<p>
  Enter your height in inches:
   <input type="text" id="height">
</p>

<input type="button" onclick="bmiCalculator()" value="calculate">
  <p id="output" ></p>

Note: this code will not work on jsfiddle.net unless the Javascript option Load Type is set to No wrap - in <body>

I found that out thanks to this other stack: Onclick event not firing on jsfiddle.net

edited May 23 '17 at 12:19

Community

1
1

answered Sep 26 '16 at 08:28

Nadia Cerezo

602
5
12

Interestingly enough, it works when I run it through this website, but when I try to run it on JSFiddle it doesn't seem to display the answer. – Ian Sep 26 '16 at 09:20
Indeed... Hadn't tried... I'm looking into it. – Nadia Cerezo Sep 26 '16 at 09:24
Haha! Got it! I will edit my answer to explain :) – Nadia Cerezo Sep 26 '16 at 09:26
Wow, thank you so much haha! I would've never guessed that, you're a godsend along with everyone else here. – Ian Sep 26 '16 at 09:32

score 0 · Answer 2 · answered Sep 26 '16 at 08:28

0

You forgot )

var BMI = (finalWeight / Math.pow(finalHeight, 2);

should be

var BMI = (finalWeight / Math.pow(finalHeight, 2));

answered Sep 26 '16 at 08:28

Zirbo Filip

300
1
13

score 0 · Answer 3 · answered Sep 26 '16 at 08:30

You are missing a ')' in your code. Update you script with this

 function bmiCalculator() {

            var weight = Number(document.getElementById("weight").value);
            var height = Number(document.getElementById("height").value);
            var finalWeight = weight * .45;
            var finalHeight = height * .025;


            var BMI = (finalWeight / Math.pow(finalHeight, 2));

            document.getElementById("output").innerHTML = BMI;

        }

Hope this will help :)

Javascript BMI Calculator

3 Answers3