javascript - tip calc equation 在第一个输出上工作，但在第二个输出上使用 number() 返回 NaN

Question

在这里查看codepen

https://codepen.io/jimandrews89/pen/zbpRdm

document.getElementById('container').onchange = function() {
  var bill = Number(document.getElementById('billTotal').value);
  var tipPercent = Number(document.querySelector('input[name = "tip"]:checked').value);
  var split = Number(document.getElementsByName('number-of-people').value);
  var tipTotal = bill * tipPercent;
  var finalTotal = (bill + tipTotal) / split;

document.getElementById('newTipTotal').innerHTML = tipTotal;
document.getElementById('newTotalWithTip').innerHTML = finalTotal;}

最后的输出应该计算账单+小费除以支付的人数。第一个输出没有损坏，所以我不知道为什么第二个输出是。起初，我想到使用 parseInt() 而不是 Number() 将字符串转换为数字，但这也使第一个输出也为 NaN。

Answer 1

您有 document.getElementsByName 而不是 document.getElementById，这就是为什么您的拆分值为 Nan。我已将更正后的代码放在下面。上面提供的链接上的测试代码。

document.getElementById('container').onchange = function() {
  var bill = Number(document.getElementById('billTotal').value);
  var tipPercent = Number(document.querySelector('input[name = "tip"]:checked').value);
  var split = Number(document.getElementById('number-of-people').value);
  var tipTotal = bill * tipPercent;
  var finalTotal = (bill + tipTotal) / split;

document.getElementById('newTipTotal').innerHTML = tipTotal;
document.getElementById('newTotalWithTip').innerHTML = finalTotal;

}