Question

我正在制作小费计算器，我希望显示小费数量供用户查看。我遇到的问题是输出显示为'NaN'或'undefined'。我试过更改我的代码，但我一直得到相同的结果。

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;

};

Answer 2

您正在阅读billInput和tipPercentage作为 HTML元素对象而不是用户输入的文本，这将是他们的.value属性。< / p>

Answer 3

在声明变量billInput和tipPercentage时，您正在加载元素而不是元素值。试试这段代码：

var billInput = document.getElementById('bill').value;
var tipPercentage = document.getElementById('tip').value;

Answer 4

function calculateTip() {
// get the VALUE property of the textbox elements
// parseInt will turn them into numbers if they're not already.
// if they are not numbers you cannot use them in math.

  var billInput = parseInt(document.getElementById('bill').value);
  var tipPercentage = parseInt(document.getElementById('tip').value);
  var tipPercentageCalc = (tipPercentage / 100);
  var tipAmount = (billInput * tipPercentageCalc);

// isNaN stands for "is Not a Number"
// this checks if tipAmount is not a number
// if it is not we simply set it to the number 0
if (isNaN(tipAmount)) {
    tipAmount = 0;
  }

  // when you concatenate a number to a string you do not need to turn it into a string.
  // it will automatically be converted
  document.getElementById('display_text').innerHTML = 'Tip = $' + tipAmount;

};

＆＃13;

function calculateTip() {
// get the VALUE property of the textbox elements
// parseInt will turn them into numbers if they're not already.
// if they are not numbers you cannot use them in math.

  var billInput = parseInt(document.getElementById('bill').value);
  var tipPercentage = parseInt(document.getElementById('tip').value);
  var tipPercentageCalc = (tipPercentage / 100);
  var tipAmount = (billInput * tipPercentageCalc);

// isNaN stands for "is Not a Number"
// this checks if tipAmount is not a number
// if it is not we simply set it to the number 0
if (isNaN(tipAmount)) {
    tipAmount = 0;
  }
  
  // when you concatenate a number to a string you do not need to turn it into a string.
  // it will automatically be converted
  document.getElementById('display_text').innerHTML = 'Tip = $' + tipAmount;

};

＆＃13;

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

＆＃13;

Javascript输入返回NaN或undefiend

4 个答案: