提示计算方程在第一个输出上工作，但在第二个输出上用 number() 返回 NaN答案

【问题标题】：tip calc equation working on first output but returning NaN on second output with number()提示计算方程在第一个输出上工作，但在第二个输出上用 number() 返回 NaN
【发布时间】：2019-03-14 03:41:32
【问题描述】：

在此处查看代码笔

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。

【问题讨论】：

在进行数学运算之前记录所有值。我敢打赌，它们并非都是数字。由于最终输出是使用 split 的输出 - 我的钱是 split 是一个空字符串或 null
document.getElementsByName -> document.getElementById
我同意@tymeJV，一个很好的做法是慢慢添加内容并随时记录。确保您使用数字的一个提示是使用console.log(typeof variable);。这将记录您正在使用的数据类型。 console.log(typeof "1"); // logs string，而console.log(typeof 1); // logs number

标签： javascript

【解决方案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;

}

【讨论】：

【解决方案2】：

欢迎来到 SO Jim！

虽然前面的回答是正确的，但让您使用container onchange 函数计算所有内容时，只要某些数据丢失，就会导致错误。例如，当您第一次更改 billTotal（并且还没有更改任何其他内容）时，您将收到一个未捕获的类型错误 (TypeError: Cannot read property 'value' of null at HTMLDivElement.document.getElementById.onchange)，其中页面正在查找不存在的小费百分比值，并且多少人。

在不更改 html 的情况下，这是一个替代解决方案。这对于每个数据输入都有onchange 侦听器，在您收集它们时更新和保存值。一旦所有数据都存在，它就会计算总数。

我在这里添加的一些新东西是parseInt 和parseFloat，这些方法非常适合将数字字符串"1" 转换为实际数字1。

let billInput = document.getElementById('billTotal');
let tipPercentInput = document.getElementById('tipPercent');
let splitInput = document.getElementById('number-of-people');

let billValue = false;
let tipPercentValue = false;
let splitValue = false;

billInput.onchange = function() {
    billValue = parseInt(billInput.value);
    calculateTip();
}

tipPercentInput.onchange = function() {
    tipPercentValue = parseFloat(document.querySelector('input[name = "tip"]:checked').value);
    calculateTip();
}

splitInput.onchange = function() {
    splitValue = parseInt(splitInput.value);
    calculateTip();
}

function calculateTip() {
    if (billValue && tipPercentValue && splitValue) {
        let tipTotal = billValue * tipPercentValue;
        let finalTotal = (billValue + tipTotal) / splitValue;

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

如果您正在查看表单中的accepting only numbers，则可以通过一种方式进一步改进您的代码。

希望这会有所帮助:)

【讨论】：

谢谢。所以只是为了澄清......你让所有三个初始变量都为假，然后在每次输入更改后添加calculateTip（）函数以在触发之前立即检查所有3个初始变量是否为真？那么如果输入了部分数据，它不会触发得太快吗？只有在用户输入更改所有三个变量之后，对吗？
没错。每次触发onchage 方法时，它会将相应的值分配给它的变量，然后它会检查calculate 的tip 函数，如果所有变量的值都不是false，它会计算tip。在这种情况下，写if (billValue) {}与if (billValue !== false) {}是一样的
酷。这是有道理的，因为有人可以以不同的顺序输入数据。谢谢！

【解决方案3】：

您还没有在输入元素中为人数添加属性“名称”。

你可以使用：

var split = Number(document.getElementById('number-of-people').value);

【讨论】：