Simple JavaScript function returns function and not value -

i'm starting out , i'm trying build simple calculation function display result of 2 numbers on page. when submit button hit output function , not value. have gone wrong?

html

<div id="input"> <form id="start">   <input id="price" type="number" placeholder="what 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> 

you have several issues javascript. let's break them down 1 one:

var price = function() {     parsefloat(document.getelementbyid("price")); } 

document.getelementbyid returns element. parsefloat try calculate element, , not value in case (which nan or not number). want value of element, using .value return value. furthermore, you're not doing value. (you should use return return float found, or set variable.)

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

price , tax both functions in case. can't multiply them desired result. using var total = price() * tax(); set variable total float returned price() , tax() now. returning value function fix next line:

document.getelementbyid("output").innerhtml = final; 

final here function. want call 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 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>