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或非数字）。您需要此元素的值，因此使用.value将返回该值。而且，你实际上并没有对价值做任何事情。（您应该使用return返回找到的浮点数，或将其设置为另一个变量。）

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

在这种情况下，

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

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

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

你的最终剧本：

＆＃13;

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();

};

＆＃13;

<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>

＆＃13;

Answer 2

你有几个问题，你在不调用它们的情况下将一些代码放入函数中。

另一个问题是，您需要输入标签的值。

＆＃13;

'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;
};

＆＃13;

<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>

＆＃13;

Answer 3

删除

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

而是把

return price * tax;

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

3 个答案: