Question

我正在构建一个小费计算器，但是我无法使函数中的if语句正常工作，只是跳过了计算。

function calculate() {
    var bill = parseInt(document.getElementById("bill").value);
    var tip = parseInt(document.getElementById("tip").value) * .01;
    var persons = parseInt(document.getElementById("persons").value);

    if (bill == "" || tip == "") {
        alert("Please enter value");
        return;
    };

    if (persons == "" || persons <= 1) {
        persons = 1;

        document.getElementById("perPerson").style.display = "none";

    } else {

    }

    let totalTipPer = (bill * tip) / persons;
    let totalPer = (bill + (tip * 100)) / persons;
    let totalTip = bill * tip;
    let total = bill + (tip * 100);

    totalTipPer = totalTipPer.toFixed(2);
    totalPer = totalPer.toFixed(2);
    total = total.toFixed(2);
    totalTip = totalTip.toFixed(2);

    document.getElementById("total-tip/person").innerHTML = totalTipPer;
    document.getElementById("total-price/person").innerHTML = totalPer;
    document.getElementById("total-tip").innerHTML = totalTip;
    document.getElementById("total-price").innerHTML = total;
}

document.getElementById("calculate").onclick = function () {
    calculate();
    document.getElementById('results').style.display = 'block';
}

我希望每人的div封装小费金额和每人的总计金额不会出现，当人的输入值为空时。

Answer 1

问题在于persons变成NaN，因为如果将该值留空，则""在通过NaN运行时会变成parseInt()。 / p>

解决此问题的方法是，如果该字段为空白，则默认将其设置为0。

var persons = parseInt(document.getElementById("persons").value || 0);

Answer 2

函数parseInt返回'从给定字符串中解析出的整数。如果第一个字符不能转换为数字，则返回NaN。如果您将一个空值（''）rpovide它将返回 NaN不等于任何东西，甚至不等于它本身。

有几种方法可以解决此问题：

检查其是否为Number.isNaN(var)的NaN
使用诸如var personsValue之类的中间值，并检查其是否等于空字符串”。
使用混合建议的解决方案并分配0 伪造的值value（''，undefined，n

ull等...）

Answer 3

正如其他人指出的那样，如果该字段为空，parseInt返回NaN，但是如果用户输入$ 5.00，也会发生这种情况。

这是确保在将值转换为数字之前的一种方法。

// This function determines if a JavaScript String can be converted into a number
function is_numeric(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}

function calculate() {
     // first put the input values into separate variables
    billValue = document.getElementById("bill").value;
    tipValue = document.getElementById("tip").value;
    personsValue = document.getElementById("persons").value;

    // use the is_numeric() function above to check if the values can be converted to numeric
    if (!is_numeric(billValue) || !is_numeric(tipValue)) {
        alert("Please enter values for bill and tip");
        return;
    }

// the rest of your code here
}

希望这会有所帮助。

如果if语句不起作用，为什么使用display：none使我的元素消失？

3 个答案: