不能確定NaN輸出的原因

Question

第一次問一個問題，長期潛伏者。這裏入學CS的學生，第一學期使用HTML和JS，並且正在研究一個項目，該項目主要檢查一些複選框，單選按鈕和文本框的值，根據輸入和值對一些變量進行格式設置，並在顯示器中輸出該信息部分。主要的問題是，我的.js腳本在NaN中產生了一個我期望得到的數字，而我無法確定爲什麼。下面是腳本，如果需要的話，我可以修改html頁面。

但基本上，在displayOutput函數中，從accessoryOut到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嘗試添加到它之前定義。我假設你想把它默認爲0.（注意：我還建議在getFinishAmount的默認amount）。

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; 
}