为什么我在本地文件中得到 NaN 但我的小提琴很好

Question

我很难理解为什么我在本地文件中得到 NaN，但在我的小提琴中它工作得很好。

我已经检查过我是否在 HTML 中遗漏了任何 id，但它看起来都是按顺序排列的。我不明白为什么它返回 NaN。

这是我认为导致问题的 JavaScript 的一部分：

function updateCost() {

    var amount = parseFloat(document.getElementById("amount").value) || 0.00,
        delivery = parseFloat(document.getElementById("delivery").value),
        total = amount + delivery,
        fixedrate =  total / 100 * 12.2,
        grandtotal = fixedrate + total;   

    document.getElementById("amountdiv").innerHTML = amount.toFixed(2);   
    document.getElementById("deliverydiv").innerHTML = delivery.toFixed(2);
    document.getElementById("total").innerHTML = total.toFixed(2);
    document.getElementById("fixedrate").innerHTML = fixedrate.toFixed(2);
    document.getElementById("grandtotal").innerHTML = grandtotal.toFixed(2);

}

    // handle the due date
    var dayNames = new Array("Sunday","Monday","Tuesday","Wednesday", "Thursday","Friday","Saturday");
    var monthNames = new Array("January","February","March","April","May","June","July", "August","September","October","November","December");    
    var todayPlus30 = new Date();
    todayPlus30.setDate(todayPlus30.getDate()+30)
    var dateStr = (dayNames[todayPlus30.getDay()] + ", " + monthNames[todayPlus30.getMonth()+1] + " " +  todayPlus30.getDate()  + ", " +  todayPlus30.getFullYear());

    $('#date').html(dateStr);

$(function(){
    document.getElementById("amount").onchange =
    document.getElementById("delivery").onchange = updateCost;
});  

$(document).ready(function(){
    $('#amount').change(function(){ updateCost(); });
    $('#delivery').change(function(){ updateCost(); });

});

$(function(){
$("#amount").keypress( function(e) {
    var chr = String.fromCharCode(e.which);
    if (".1234567890NOABC".indexOf(chr) < 0)
        return false;
});
});

$("#amount").blur(function() {
    var input = $(this).val();
    if (/^\d*\.?\d{0,2}$/.test(input)) {
        var amount = parseFloat(input);
        if (amount < 40 || amount > 200) {
            $("span.paymentalert").html("Your payment must be between £40 and £200");
        } else {
            $("span.paymentalert").html("");
        }
    } else {
        $("span.paymentalert").html("Your payment must be a number");
    }
});

Answer 1

试试这个功能：

function updateCost() {

    var amount = parseFloat(document.getElementById("amount").value) || 0.00;
    var delivery = document.getElementById("delivery").value;
    if(delivery !='select' && delivery)
    {
        delivery=parseFloat(delivery);
    }
    else
    {
       delivery=0.00;
    }
    var total = amount + delivery;
    var fixedrate =  total / 100 * 12.2;
    var grandtotal = fixedrate + total;   

    document.getElementById("amountdiv").innerHTML = amount.toFixed(2);   
    document.getElementById("deliverydiv").innerHTML = delivery.toFixed(2);
    document.getElementById("total").innerHTML = total.toFixed(2);
    document.getElementById("fixedrate").innerHTML = fixedrate.toFixed(2);
    document.getElementById("grandtotal").innerHTML = grandtotal.toFixed(2);

}

你也写了onchange函数2次

$(document).ready(function(){
    $('#amount').change(function(){ updateCost(); });
    $('#delivery').change(function(){ updateCost(); });
});

你可以删除它

$(function(){
    document.getElementById("amount").onchange =updateCost;
    document.getElementById("delivery").onchange = updateCost;
}); 

Answer 2

你好像错过了什么

$(function(){
document.getElementById("amount").onchange = // something should be here with statement end
document.getElementById("delivery").onchange = updateCost;
});  

看评论部分，你也错过了语句的金额初始化和终止。

我希望这能解决 NAN 的问题 :)