Why can't I get this javascript code work?

Question

I have written a web page in JavaScript that calculates your BMI and it seems to work but when I hit the calculate button an alert box pops up and says "your BMI is NaN". I know NaN stands for not a number. I just want to know why I can't get this to work.

<!DOCTYPE html>

<html>
<head>

    <title>BMI</title>

</head>

<body>
    <p>Your weight:<input type="number" id="value1" /></p>

    <p>Your height (in inches):<input type="number" id="value2" /></p>

<script>

    function calc() {
    var data1 = document.getElementById("value1");
    var data2 = document.getElementById("value2");
    var weight = (data1 * 703);
    var height = (weight) / (data2 * data2);
    alert("Your BMI is " + height);
    };

    </script>

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

</body>
</html>

Because you are trying to make arithmetic calculations with **DOM elements**. You have to get the *value* of the inputs instead. — Felix Kling, Jul 17 '14 at 16:30
You need to get the values from those input DOM elements, before doing those calculations — forgivenson, Jul 17 '14 at 16:31
The values will be implicitly converted, but if you want to do it explicitly: http://stackoverflow.com/q/11613705/218196 — Felix Kling, Jul 17 '14 at 16:34

score 0 · Answer 1 · answered Jul 17 '14 at 16:31

You have to get the innervalue of your data1 and data2.

<!DOCTYPE html>

<html>
<head>

    <title>BMI</title>

</head>

<body>
    <p>Your weight:<input type="number" id="value1" /></p>

    <p>Your height (in inches):<input type="number" id="value2" /></p>

<script>

    function calc() {
    var data1 = parseFloat(document.getElementById("value1").value);
    var data2 = parseFloat(document.getElementById("value2").value);
    var weight = (data1 * 703);
    var height = (weight) / (data2 * data2);
    alert("Your BMI is " + height);
    };

    </script>

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

</body>
</html>

`` is a self-closing tag. It doesn't have inner HTML at all. — Álvaro González, Jul 17 '14 at 16:34

score 0 · Accepted Answer · answered Jul 17 '14 at 16:34

Here's a fiddle: http://jsfiddle.net/wYfq8/

function calc() {
    var data1 = document.getElementById("value1").value;
    var data2 = document.getElementById("value2").value;
    var weight = (data1 * 703);
    var height = (weight) / (data2 * data2);
    alert("Your BMI is " + height);
};

Why can't I get this javascript code work?

2 Answers2