JavaScript 計算利息顯示 NaN？變量作用域與事件綁定的常見陷阱

問題現象

頁面包含本金、利率輸入框與計算按鈕，綁定 change 事件實時計算利息總額、本息合計、利息稅。但結果欄顯示 NaN，且初始化計算失效。

核心錯誤分析

1. 變量聲明污染作用域

$("#money").change(function () {
    /*var*/ interestrate = parseFloat($("#interestrate").val()); // 缺少 var，污染全局
    BondCalculator(money, interestrate);
});

註釋掉 var 導致變量隱式成為全局變量，且事件觸發順序不確定時，另一變量可能尚未賦值，傳入 NaN。

2. 初始化代碼執行時機錯誤

var money = parseFloat($("#money").val()); // DOM 未就緒時執行，獲取不到值
var interestrate = parseFloat($("#interestrate").val());
BondCalculator(money, interestrate);

這段代碼應放在 $(document).ready() 內部，且在事件綁定之後。

3. 計算函數參數未驗證

BondCalculator 內部直接使用參數運算，未處理 NaN、空值情況。

修復方案：重構代碼結構

$(document).ready(function () {
    // 1. 統一獲取 DOM 引用
    const $money = $('#money');
    const $rate = $('#interestrate');
    const $lj = $('#lj'), $lj1 = $('#lj1'), $lj2 = $('#lj2');

    // 2. 核心計算函數：參數校驗 + 邏輯封裝
    function calculate() {
        const principal = parseFloat($money.val()) || 0;
        const rate = parseFloat($rate.val()) || 0;
        if (isNaN(principal) || isNaN(rate)) return;

        const interest = principal * (rate / 100); // 示例公式
        const total = principal + interest;
        const tax = interest * 0.05; // 假設稅率 5%

        $lj.val(interest.toFixed(2));
        $lj1.val(total.toFixed(2));
        $lj2.val(tax.toFixed(2));
    }

    // 3. 事件綁定：輸入框變動觸發計算
    $money.add($rate).on('input change', calculate);

    // 4. 頁面加載完成後執行一次初始計算
    calculate();
});

關鍵改進點

• 嚴格作用域：使用 const/let 避免變量提升污染。
• 防抖優化：高頻輸入建議加 debounce（如 300ms）減少計算次數。
• 輸入驗證：parseFloat(val) || 0 確保非數字時默認 0，避免 NaN 傳播。
• 統一入口：單一 calculate() 函數便於維護與測試。

調試技巧

1. 控制台打印關鍵變量：console.log('money:', money, 'rate:', rate);
2. 使用 debugger 斷點檢查事件觸發順序。
3. 檢查 HTML 中 id 是否唯一、拼寫正確。

總結

NaN 多源於「變量未聲明污染全局」與「DOM 未就緒獲取值」。遵循「嚴格作用域、統一入口、參數校驗」三原則，配合現代 ES6+ 語法，可徹底規避此類低級錯誤。