Undefined output when adding inputs in javascript

Question

Trying to make a BMR calculator as a homework assignment. I think i figured most of it out, but i get "undefined" as output in my output field. Here is the code:

<input class="boks" placeholder="vekt i kg" id="vekt" type="text">

<input class="boks" placeholder="høyde i cm" id="hoyde" type="text">

<input class="boks" placeholder="alder" id="alder" type="text">

<button id="beregn" onclick="utregning()">Regn ut din BMR</button>

<input class="boks" placeholder="Din BMR" id="output" type="text" 
readonly="true">

js:

var konstant = 66.5;

var vekt = parseInt(document.getElementById("vekt").value);

var vektutr = vekt*13.75;

var hoyde = parseInt(document.getElementById("hoyde").value);

var hoydeutr = hoyde*5.003;

var alder = parseInt(document.getElementById("alder").value);

var alderutr = alder*6.755;

var sum = +konstant + +vektutr + +hoydeutr - +alderutr;

function utregning() {

document.getElementById("output").value = sum;

}

You are getting the values from the input fields at page load, before they have a value. — Felix Kling
– Felix Kling, Commented Oct 16, 2018 at 18:55
You need to put all your variable inside your function, otherwise they're getting their value before the user does anything. — j08691
– j08691, Commented Oct 16, 2018 at 18:55

brk · Accepted Answer · 2018-10-16 18:55:18Z

1

You need to get all the values from input inside the function, because the code outside the function will execute before calling utregning and at that time the value of the input field will be empty

var konstant = 66.5;



function utregning() {
  var vekt = parseInt(document.getElementById("vekt").value);

  var vektutr = vekt * 13.75;

  var hoyde = parseInt(document.getElementById("hoyde").value);

  var hoydeutr = hoyde * 5.003;

  var alder = parseInt(document.getElementById("alder").value);

  var alderutr = alder * 6.755;

  var sum = +konstant + +vektutr + +hoydeutr - +alderutr;

  document.getElementById("output").value = sum;

}

<input class="boks" placeholder="vekt i kg" id="vekt" type="text">

<input class="boks" placeholder="høyde i cm" id="hoyde" type="text">

<input class="boks" placeholder="alder" id="alder" type="text">

<button id="beregn" onclick="utregning()">Regn ut din BMR</button>

<input class="boks" placeholder="Din BMR" id="output" type="text" readonly="true"> js:

answered Oct 16, 2018 at 18:55

brk

50.3k10 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ken Over a year ago

Rookie mistake on my part, forgot that i need to make the function, you know, a function. Thanks a lot!

Ferdinando · Accepted Answer · 2018-10-16 19:08:47Z

0

try this code: i tried and it's works fine.

<!DOCTYPE html>
<html>

    <head>
        <title>
            My Web Page
        </title>

    <script>
        function utregning() {
var konstant = 66.5;

var vekt = parseInt(document.getElementById("vekt").value);

var vektutr = vekt*13.75;

var hoyde = parseInt(document.getElementById("hoyde").value);

var hoydeutr = hoyde*5.003;

var alder = parseInt(document.getElementById("alder").value);

var alderutr = alder*6.755;

var sum = +konstant +vektutr +hoydeutr - alderutr;

document.getElementById("output").value = sum;

}   
    </script>

    </head>

<body>

<input class="boks" placeholder="vekt i kg" id="vekt" type="text">

<input class="boks" placeholder="høyde i cm" id="hoyde" type="text">

<input class="boks" placeholder="alder" id="alder" type="text">

<button id="beregn" onclick="utregning()">Regn ut din BMR</button>

<input class="boks" placeholder="Din BMR" id="output" type="text" 
readonly="true">

</body>


</html>

answered Oct 16, 2018 at 19:08

Ferdinando

9621 gold badge12 silver badges23 bronze badges

2 Comments

AuxTaco Over a year ago

This answer would be more useful if it explained why it works fine.

Ferdinando Over a year ago

ok @auxTaco.if the user puts all values inside function he is secure that all variable are initialized in correct way...sorry, i am new...

Collectives™ on Stack Overflow

Undefined output when adding inputs in javascript

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related