javascript - 简单的 JavaScript 函数返回函数而不是值

Question

我刚刚起步，我正在尝试构建一个简单的计算函数，它将在页面上显示 2 个数字的结果。当提交按钮被点击时，输出是函数而不是值。我哪里出错了？

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>

Answer 1

您的 javascript 有几个问题。让我们一一分解:

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

document.getElementById 返回一个元素。 parseFloat 会尝试计算元素，而不是在这种情况下的值(它总是 NaN 或 Not a Number)。你想要这个元素的值，所以使用 .value将返回值。此外，您实际上并没有对这个值做任何事情。 (您应该使用 return 返回找到的 float ，或将其设置为另一个变量。)

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

price 和 tax 在这种情况下都是函数。您不能简单地将它们相乘以获得所需的结果。使用 var total = price() * tax(); 会将变量 total 设置为从 price() 和 返回的 float tax() 现在。将此值返回给函数将修复下一行:

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

final 这里也是一个函数。您想使用 final() 调用它。

您的最终脚本:

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>