JavaScript 法律計算器：單選框切換利率單位未生效的事件綁定修復與重構

開發者遇到單選框「年/月/日利率」切換後計算結果不變。根因：HTML `onclick` 寫法錯誤、三個計算函數高度重複、變量作用域混亂。

錯誤代碼定位

<input type="radio" id="1-5" onclick="Costcalculator1" />  <!-- ❌ 缺少參數傳遞、函數未調用 -->
<input type="radio" id="1-4" onclick="Costcalculator2" />
<input type="radio" id="1-6" onclick="Costcalculator" checked />

修復核心：統一事件綁定 + 策略模式

// HTML 移除 onclick，統一用 jQuery 綁定
<input type="radio" name="rateType" value="year" checked> 年利率
<input type="radio" name="rateType" value="month"> 月利率
<input type="radio" name="rateType" value="day"> 日利率

// JS 重構
const RATE_DIVISOR = { year: 1, month: 12, day: 365 };

function calculateAll(principal, rate) {
    // 核心費用邏輯只寫一次，返回基礎值
    const base = computeBaseFees(principal, rate);  // 你的原始計算邏輯
    return {
        year: divideResult(base, 1),
        month: divideResult(base, 12),
        day: divideResult(base, 365)
    };
}

function divideResult(base, divisor) {
    return Object.keys(base).reduce((o, k) => {
        o[k] = (base[k] / divisor).toFixed(2);
        return o;
    }, {});
}

$('input[name="rateType"]').on('change', function() {
    const type = $(this).val();
    const principal = parseFloat($('#input').val()) || 0;
    const rate = parseFloat($('#input1').val()) || 0;
    const results = calculateAll(principal, rate)[type];
    renderResults(results);  // 統一渲染函數
});

// 輸入框變化自動觸發當前選中單選框的 change
$('#input, #input1').on('input', function() {
    $('input[name="rateType"]:checked').trigger('change');
});

關鍵改進

1. 移除內聯 `onclick`，採用 jQuery `change` 事件委託
2. 單一 `calculateAll` 返回三種單位結果，消除 3 個函數 90% 重複代碼
3. 輸入框 `input` 事件觸發當前選中單選框 `change`，實現實時聯動
4. 渲染邏輯集中化，維護性大幅提升