NaN, when running BMI calculator

Question

What am i doing wrong? According to the textbook example this is supposed to be sufficient code, but I get NaN when running it in a browser.

<!DOCTYPE html>
    <html lang="en"> 
    <meta charset="utf-8"/>
    <html>
      <head>
        <title>test</title>
      </head>
    <body>

    <p>Vekt: <input type="text" id="txtVekt" /></p>
    <p>Hoyde: <input type="text" id="txtHoyde" /></p>
      <button id="btnBeregn">Beregn</button>
      <p id="resultat"></p>

      <script>
    window.onload = beregn();


      function beregn(){
        var hoyde = document.getElementById("txtHoyde").value;
        var vekt = document.getElementById("txtVekt").value;

        var bmi = vekt / (hoyde * vekt);

        document.getElementById("resultat").innerHTML = "Din BMI er: " + bmi;
      }

    </script>

      </body>
    </html>

Well, what do you expect `document.getElementById("txtHoyde").value` to return right after the page has loaded? From what I can see, there is no value. If I take no value and perform math on it then surely the result must be NotANumber. — takendarkk, Mar 13 '17 at 19:57
your initial values in the textboxes default to 0 so your `vekt / (hoyde * vekt)` is dividing by 0 — Patrick Barr, Mar 13 '17 at 19:57
The window onload events trigger upon site load, so when the user opens the site. At that point (I assume, the text inputs are empty). Also, if you do it like this, the function beregnen will be executed immediatly. In addition, you need to parse the values of the text inputs with parseFloat (or something similar). — scriptify, Mar 13 '17 at 19:58

score 0 · Answer 1 · answered Mar 13 '17 at 19:57

0

hoyde and vekt do not have any value when the page loads since the inputs are empty, so there is no reason why bmi should give you anything other than NaN.

You need to either give those inputs a default value (probably 1 to begin) and then rerun the begregn function whenever the button is clicked:

 <p>Vekt: <input type="text" id="txtVekt" value=1/></p>
 <p>Hoyde: <input type="text" id="txtHoyde" value=1/></p>
 <button id="btnBeregn" onclick="begregn()">Beregn</button>

Or just don't run begregn on window load, but only when the button is clicked

answered Mar 13 '17 at 19:57

Pabs123

3,385
13
29

:P. I saw the "0" sample values and almost thought to respond, but then you changed them.... awe, to bad :D. – Peter Branforn Mar 13 '17 at 20:01
haha I wrote the answer too quickly but luckily caught myself – Pabs123 Mar 13 '17 at 20:02
I'm downvoting your answer due to the use of the `onclick` attribute. You got it 90% right. What you should do is use `window.onload = function(){ document.getElementById('btnBegregn').onclick = begregn; };`. @Marc answer has the same problem. I'm using the `onclick` property for compatibility with IE<8. – Ismael Miguel Mar 14 '17 at 08:57
1

@IsmaelMiguel I don't think that deserves a downvote for either of us. The solution is correct and compatible with all modern browsers. Had the OP asked for something compatible with IE<8 then sure downvote me for not answering his question, but otherwise your comment makes no sense – Pabs123 Mar 14 '17 at 15:58
It still isn't the recommended way. The recommended way is `document.getElementById('btnBegregn').addEventListener('click', begregn);`. – Ismael Miguel Mar 14 '17 at 19:01
1

recommended by whom? `addEventListener` doesn't even work in IE 8 and down as you need to use `attachEvent`. I don't know where you're getting your info but your argument is not even correct: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener And here is a pretty comprehensive answer showing why one is not better than the other: http://stackoverflow.com/a/6348597/1148244 – Pabs123 Mar 14 '17 at 19:21

score 0 · Answer 2 · answered Mar 13 '17 at 20:01

0

window.onload runs... on window load. :)

Change window.onload = beregn(); to:

var btn = document.getElementById("btnBeregn"); btn.addEventListener("click", beregn);

answered Mar 13 '17 at 20:01

D. Walsh

1,963
1
21
23

score 0 · Accepted Answer · answered Mar 13 '17 at 20:06

Your values are not initialized when you first run the function
There's really no need to run the function onload, especially since your values aren't initialized. Note that my code removes the onload invocation.

You can just run the calculation when the button is clicked. You might also want to add some validation before you run the function, but I'll leave that exercise to you.

  <body>
 <p>Vekt: <input type="text" id="txtVekt" /></p>
    <p>Hoyde: <input type="text" id="txtHoyde" /></p>
      <button id="btnBeregn" onclick="beregn();" >Beregn</button>
      <p id="resultat"></p>

      <script>
      function beregn(){
        var hoyde = document.getElementById("txtHoyde").value;
        var vekt = document.getElementById("txtVekt").value;

        //this assumes your inputs are valid numbers...
        var bmi = vekt / (hoyde * vekt);

        document.getElementById("resultat").innerHTML = "Din BMI er: " + bmi;
      }

    </script>

   </body>

NaN, when running BMI calculator

3 Answers3