Javascript 输入返回 NaN 或未定义

Question

我正在制作小费计算器，我希望显示小费金额以供用户查看。我遇到的问题是输出显示为“NaN”或“未定义”。我尝试更改我的代码，但我一直得到相同的结果。

function calculateTip() {
  var billInput = document.getElementById('bill');
  var tipPercentage = document.getElementById('tip');
  var tipPercentageCalc = (tipPercentage / 100);
  var tipAmount = (bill * tipPercentageCalc).toFixed(2);
  tipAmount = tipAmount.toString();
  document.getElementById('display_text').innerHTML = 'Tip = $', +tipAmount;

};

<div id='calculate'>
  <p>Bill: $<input id="bill" type="number" name="bill" placeholder="Enter bill amount" onchange="calculateTip()"></p>
  <p>Tip: %<input id="tip" type="number" name="tip" placeholder="15%" onchange="calculateTip()"></p>
  <input type="button" name="submit" onclick="calculateTip();">
</div>
<div id="display">
  <h4 id="display_text"></h4>
</div>

Answer 1

您忘记获取字段的值。因为没有属性 .value，它返回 HTMLObject。

function calculateTip() {
    var billInput = parseFloat(document.getElementById('bill').value);
    var tipPercentage = parseFloat(document.getElementById('tip').value);
    var tipPercentageCalc = (tipPercentage / 100);
    var tipAmount = (bill * tipPercentageCalc).toFixed(2);
    tipAmount = tipAmount.toString();
    document.getElementById('display_text').innerHTML = 'Tip = $', + tipAmount;

};