Simple JavaScript function returns function and not value

Question

I'm just starting out and I'm trying to build a simple calculation function that will display the result of 2 numbers on a page. When the submit button is hit the output is the function and not the value. Where have I gone wrong?

HTML

<div id="input">
<form id="start">
  <input id="price" type="number" placeholder="What is the starting price?" value="10">
  <input id="tax" type="number" value="0.08" step="0.005">
</form>
<button type="button" form="start" value="submit" onClick="total()">Submit</button>
</div>
<div id="test">Test</div>

JS

<script>
'use strict';

var total = function() {

  var price = function() {
    parseFloat(document.getElementById("price"));
  }

  var tax = function() {
    parseFloat(document.getElementById("tax"));
  }
  var final = function() {
    final = price * tax;
    final = total
  }

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

};
</script>

.... and document.getElementById(...) are references to those input elements, rather than their values. — devnull69
– devnull69, Commented Aug 29, 2016 at 10:15
You are declaring final as a function then redeclaring it as two different things within that function — Craicerjack
– Craicerjack, Commented Aug 29, 2016 at 10:17
From your code and all the comments I can see that you need to dig into Javascript basics before you continue to write code :-) — devnull69
– devnull69, Commented Aug 29, 2016 at 10:17

Blue · Accepted Answer · 2016-08-29 10:28:26Z

6

You have several issues with your javascript. Let's break them down one by one:

var price = function() {
    parseFloat(document.getElementById("price"));
}

document.getElementById returns an element. parseFloat would try to calculate the element, and not the value in this case (Which would always be NaN or Not a Number). You want the value of this element, so using .value will return the value. Furthermore, you're not actually doing anything with the value. (You should use return to return the float found, or set it to another variable.)

var final = function() {
   final = price * tax;
   final = total
}

price and tax are both functions in this case. You can't simply multiply them to get your desired result. Using var total = price() * tax(); will set the variable total to the float returned from price() and tax() now. Returning this value to the function will fix the next line:

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

final here is also a function. You want to call it by using final().

Your final script:

var total = function() {

  var price = function() {
    return parseFloat(document.getElementById("price").value);
  }

  var tax = function() {
    return parseFloat(document.getElementById("tax").value);
  }
  var final = function() {
    var total = price() * tax();
    return total
  }

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

};

<div id="input">
  <form id="start">
    <input id="price" type="number" placeholder="What is the starting price?" value="10">
    <input id="tax" type="number" value="0.08" step="0.005">
  </form>
  <button type="button" form="start" value="submit" onClick="total()">Submit</button>
</div>
<div id="output">test</div>

edited Aug 29, 2016 at 10:28

answered Aug 29, 2016 at 10:13

Blue

23k7 gold badges69 silver badges102 bronze badges

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

3 Comments

Craicerjack Over a year ago

explaining the issues would make this a better answer rather than simply fixing them.

Blue Over a year ago

@Craicerjack Yup, I agree. Most users build up their answers.

oneWorkingHeadphone Over a year ago

Works great and the explanation is really awesome to help me understand what was happening!

Nina Scholz · Accepted Answer · 2016-08-29 10:17:16Z

2

You have several issues, you put some code into function without calling them.

Another problem is, you need the value of the input tags.

'use strict';
var total = function() {
    var price = parseFloat(document.getElementById("price").value);
    //                                           get value ^^^^^^
    var tax = parseFloat(document.getElementById("tax").value)
    //                                       get value ^^^^^^

    // calculate directly the final value
    var final = price * tax;
   
    document.getElementById("output").innerHTML = final;
};

<div id="input">
<form id="start">
  <input id="price" type="number" placeholder="What is the starting price?" value="10">
  <input id="tax" type="number" value="0.08" step="0.005">
</form>
<button type="button" form="start" value="submit" onClick="total()">Submit</button>
<div id="output"></div>

edited Aug 29, 2016 at 10:17

answered Aug 29, 2016 at 10:10

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

1 Comment

Blue Over a year ago

Great alternative solution, and simplifies what the OP is asking for.

Juan J. Sáez · Accepted Answer · 2016-08-29 10:17:31Z

-2

Delete

var final = function() {
    final = price * tax;
    final = total
  }

and instead put

return price * tax;

answered Aug 29, 2016 at 10:17

Juan J. Sáez

1024 bronze badges

1 Comment

devnull69 Over a year ago

You are still not calling price and tax functions

Collectives™ on Stack Overflow

Simple JavaScript function returns function and not value

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related