Javascript tip calc方程在第一个输出上工作，但在第二个输出上返回NaN，编号为（）

请看这里的代码笔

---

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

您有

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;

}

---

您尚未在输入元素中为人数添加属性“name”

您可以使用：

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

欢迎来到SO Jim

虽然前面的回答是正确的，但如果使用

container onchange

函数计算所有内容，则当某些数据丢失时，将导致错误。例如，当您第一次更改

billTotal

（并且还没有更改任何其他内容）时，您将得到一个未捕获的类型错误（

TypeError:无法在htmlVelment.document.getElementById.onchange处读取null属性“value”）页面在哪里查找不存在的小费百分比值和人数

在不更改html的情况下，这里有一个替代解决方案。这为每个数据输入提供了
onchange
侦听器，在收集值时更新并保存这些值。一旦所有数据都存在，它就会计算总数

我在这里介绍了一些新东西，这些方法非常适合将数字字符串
“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;
    }
}


如果您正在查看表单中的代码，则可以进一步了解代码

希望这对您有所帮助：）
在进行数学运算之前，记录所有值。我敢打赌，它们并不都是数字。由于最终的输出是使用
split
——我的钱花在
split
上，因为它是一个空字符串或null
文档。getElementsByName
->
文档。getElementById
我同意@tymeJV，一个很好的做法是慢慢添加内容并在运行时记录。确保使用数字的一个技巧是使用
console.log（typeof变量）。这将记录您正在处理的数据类型<代码>控制台.log（类型为“1”）；//日志字符串
，而
console.log（typeof 1）；//日志编号
谢谢。所以我想澄清一下。。。将所有三个初始变量设置为false，然后在每次输入更改后添加calculateIP（）函数，以在触发之前立即检查所有三个初始变量是否为true？所以，如果输入了部分数据，它不会很快触发？只有在所有三个变量都被用户输入改变后，正确吗？这是正确的。每次触发
onchage
方法时，它都会将相应的值分配给它的变量，然后它会检查
calculate
tip函数，如果所有变量的值都不是
false
，它会计算tip。在这种情况下，写入
if（billValue）{}
与
if（billValue！==false）{}
相同。这是有意义的，因为有人可以以不同的顺序输入数据。谢谢
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;
    }
}