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

您有http://mvcsite.local而不是document.getElementsByName，这就是为什么拆分值是Nan的原因。我将更正的代码放在下面。在上面提供的链接上经过测试的代码。

document.getElementById

Answer 2

您尚未在输入元素中添加人数的属性“名称”。

您可以使用：

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

Answer 3

欢迎来到吉姆！

尽管先前的响应是正确的，但是如果您使用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，则是进一步扩展代码的一种方法。

希望这会有所帮助：）

在第一个输出上工作的tip calc方程，但在第二个输出上使用number（）返回NaN

3 个答案: