无法确定NaN输出的原因

Question

第一次问一个问题，长期潜伏。入口CS学生在这里，第一学期使用HTML和JS，我正在研究一个基本上检查一些复选框，单选按钮和文本框的值的项目，根据输入和值格式化一些变量，并在显示中输出该信息部分。主要的问题是，我的.js脚本导致NaN中的输出在我期望的数字的地方，我无法确定原因。下面是脚本，如果需要，我也可以修改html页面。

但基本上，在displayOutput函数中，从accessoriesOut到amountOut的范围正在给我一个NaN的显示，而我却不知所措。

// Declares global variables and their default values.
const STEREO_COST=425.76;
const INTERIOR_COST=987.41;
const NAVIGATION_COST=1741.23;
const STANDARD_FINISH=0;
const PEARLIZED_FINISH=345.72;
const CUSTOM_FINISH =599.99;
const EXCELLENT_CONDITION=1.0;
const GOOD_CONDITION=0.9;
const FAIR_CONDITION=0.8;
const POOR_CONDITION=0.6;
const SALES_TAX_RATE=0.08;
const TRADE="trade";
const ACCESSORIES="accessories";
const SUBTOTAL="subtotal";
const TAX="tax";
const AMOUNT="amount";
const PRICE="price";
const NAME="name";


// Establishes pricing and condition values with the corresponding user inputs.
function pageLoad(){
    document.getElementById("stereoDiv").innerHTML += FormatCurrencyText(STEREO_COST);
    document.getElementById("interiorDiv").innerHTML += FormatCurrencyText(INTERIOR_COST);
    document.getElementById("navigationDiv").innerHTML += FormatCurrencyText(NAVIGATION_COST);
    document.getElementById("standardDiv").innerHTML += FormatCurrencyText(STANDARD_FINISH);
    document.getElementById("pearlizedDiv").innerHTML += FormatCurrencyText(PEARLIZED_FINISH);
    document.getElementById("customDiv").innerHTML += FormatCurrencyText(CUSTOM_FINISH);
    document.getElementById("excellentDiv").innerHTML += FormatPercentText(EXCELLENT_CONDITION);
    document.getElementById("goodDiv").innerHTML += FormatPercentText(GOOD_CONDITION);
    document.getElementById("fairDiv").innerHTML += FormatPercentText(FAIR_CONDITION);
    document.getElementById("poorDiv").innerHTML += FormatPercentText(POOR_CONDITION);
}

// Formats money value for output.
function FormatCurrency(amt){
    return "$" + amt.toFixed(2); }

// Formats the output and text for currency.
function FormatCurrencyText(amt){
    return " (" + FormatCurrency(amt) + ")"; }

// Formats the percent values for display.
function FormatPercentText(pct){
    return " (" + (pct * 100).toFixed(2) +"%)"; }

// Determines which trade-in choice is made, and assigns it to and returns a variable.
function getConditionRate() {
    var rate;

if (document.getElementById("excellent").checked==true){
    rate=EXCELLENT_CONDITION; }

if (document.getElementById("good").checked==true){
    rate=GOOD_CONDITION; }

if (document.getElementById("fair").checked==true){
    rate=FAIR_CONDITION; }

if (document.getElementById("poor").checked==true){
    rate=POOR_CONDITION; }

    return rate; }

// Determines which accessories are selected, accumulates and returns a total.
function getAccessoriesTotal() {
    var total;

if (document.getElementById("stereo").checked==true){
    total += parseFloat(STEREO_COST); }
if (document.getElementById("interior").checked==true){
    total += parseFloat(INTERIOR_COST); }
if (document.getElementById("navigation").checked==true){
    total += parseFloat(NAVIGATION_COST); }

    return total; }

// Determines which finish choice is made, assigns it to a variable for return.
function getFinishAmount(){ 
    var amount;

if (document.getElementById("standard").checked==true){
    amount = parseFloat(STANDARD_FINISH); }
if (document.getElementById("pearlized").checked==true){
    amount = parseFloat(PEARLIZED_FINISH); }
if (document.getElementById("custom").checked==true){
    amount = parseFloat(CUSTOM_FINISH); }

    return amount; }

// Determines whether a trade-in was selected, enables/disables controls accordingly.
function EnableTradeIn(){   
    var isChecked = document.querySelector('[id="tradein"]:checked');    

if (isChecked) {
document.getElementById("excellent").disabled=false;
document.getElementById("good").disabled=false;
document.getElementById("fair").disabled=false;
document.getElementById("poor").disabled=false;
document.getElementById("tradeinBox").disabled=false; }

else {
document.getElementById("excellent").disabled=true;
document.getElementById("good").disabled=true;
document.getElementById("fair").disabled=true;
document.getElementById("poor").disabled=true;
document.getElementById("tradeinBox").disabled=true;    

document.getElementById("excellent").focus();

document.getElementById("tradeinBox").value=""; }
}

//
function DisplayOutput(accessoriesTotal, tradeinAllowance, subtotal, taxAmount, amountDue, price, name) {
    document.getElementById("nameOut").innerHTML=name;
    document.getElementById("priceOut").innerHTML=FormatCurrency(price);
    document.getElementById("accessoriesOut").innerHTML=FormatCurrency(accessoriesTotal);
    document.getElementById("tradeinOut").innerHTML=FormatCurrency(tradeinAllowance);
    document.getElementById("subtotalOut").innerHTML=FormatCurrency(subtotal);
    document.getElementById("salestaxOut").innerHTML=FormatCurrency(taxAmount);
    document.getElementById("amountOut").innerHTML=FormatCurrency(amountDue); 
}

function CalculateMain(){
    var accessoriesTotal = 0;
    var tradeinAllowance = 0;
    var subtotal = 0;
    var taxAmount = 0;
    var amountDue = 0;
    var isTradein;
    var conditionRate = 0;
    var tradeinAmount = 0;
    var conditionRate = 0;
    var price = document.getElementById("priceBox").value;
    var name = document.getElementById("nameBox").value;

   //Validate that name is entered
    if (name == "" || document.getElementById("nameBox").value==undefined){
        document.getElementById("nameError").style.border="1px solid red";
        document.getElementById("nameError").innerHTML = "No name entered";
        return; }
    else{
        document.getElementById("nameError").style.border="";
        document.getElementById("nameError").innerHTML = ""; }

   //Validate price
    if (isNaN(price) || price == "" || price < 0){
        document.getElementById("priceError").style.border="1px solid red";
        document.getElementById("priceError").innerHTML = "Price is not valid";
        return; }
        else {
        price = parseFloat(price);
        document.getElementById("priceError").style.border="";
        document.getElementById("priceError").innerHTML = "";
    }

   //Determine if there is a trade-in
    isTradein = document.getElementById("tradein").checked;

    if (isTradein) {
        tradeinAmount = parseFloat(document.getElementById("tradeinBox").value);
        conditionRate = getConditionRate(); }


    //Validate trade in amount
    if (isNaN(tradeinAmount) || tradeinAmount == "" || tradeinAmount < 0) {
            document.getElementById("tradeinError").style.border = "1px solid red";
            document.getElementById("tradeinError").innerHTML = "Tradein amount is not valid";
            return; } 
    else {
        document.getElementById("tradeinError").style.border = "";
        document.getElementById("tradeinError").innerHTML = ""; }


    //Calculate trade-in allowance (will be 0 if check box is not checked)
    tradeinAllowance = parseFloat(tradeinAmount) * parseFloat(conditionRate);

    //Validate trade in allowance is not greater than price
    if (tradeinAllowance > price){
        document.getElementById("tradeinError").style.border="1px solid red";
        document.getElementById("tradeinError").innerHTML = "Trade in more than Price";
        return; }
    else {
        document.getElementById("tradeinError").style.border="";
        document.getElementById("tradeinError").innerHTML = "";
    }

    accessoriesTotal = getAccessoriesTotal() + getFinishAmount();
    subtotal = price + accessoriesTotal - tradeinAllowance;
    taxAmount = subtotal * SALES_TAX_RATE;
    amountDue = subtotal + taxAmount;

    //Call DisplayOutput
    DisplayOutput(parseFloat(accessoriesTotal), parseFloat(tradeinAllowance), parseFloat(subtotal), parseFloat(taxAmount), parseFloat(amountDue), price, name);

}

Answer 1

在getAccessoriesTotal函数中，在尝试添加total之前，您没有定义amount。我假设您要将其默认为0.（注意：我还建议将getFinishAmount中的function getAccessoriesTotal() { var total = 0; if (document.getElementById("stereo").checked==true){ total += parseFloat(STEREO_COST); } if (document.getElementById("interior").checked==true){ total += parseFloat(INTERIOR_COST); } if (document.getElementById("navigation").checked==true){ total += parseFloat(NAVIGATION_COST); } return total; } 默认为某些内容。

{{1}}