今日學習目標

• 實作動態修改金庫名稱的互動功能（讓使用者自訂專屬名稱）
• 抓取右側快速記帳表單的 DOM 元素
• 「新增支出」按鈕的點擊事件
• 實現不用重新整理網頁，就能將消費明細即時渲染到畫面的動態新增機制

一、 個人化金庫命名實作

還記得我們前幾天在右上角留了一個輸入名字的欄位嗎？今天我們透過 JavaScript，讓它真正具備互動能力。當使用者輸入名字並按下按鈕時，主標題就會即時改變。

//  抓取網頁上的按鈕、輸入框與標題元素
const setNameBtn = document.getElementById('set-name-btn');
const userNameInput = document.getElementById('user-name-input');
const vaultTitle = document.getElementById('vault-title');

//  按鈕點擊
setNameBtn.addEventListener('click', function() {
    const userName = userNameInput.value.trim();

    // 檢查有沒有輸入名字
    if (userName === "") {
        alert("請先輸入你的名字喔！");
        return;
    }

    // 修改標題文字
    vaultTitle.textContent = `${userName}的小金庫`;
    
    // 提示成功
    alert(`已成功建立屬於 ${userName} 的小金庫 `);
});

二、 動態新增消費紀錄表單

當使用者在右側表單填寫日期、消費名稱、金額，並從下拉選單選擇分類後，點擊「新增支出」，我們必須把這些資料抓下來，並即時塞到左側的日曆檢視清單中

//  抓取表單輸入欄位與按鈕、日曆顯示容器
const addBtn = document.getElementById('add-btn');
const expenseDateInput = document.getElementById('expense-date');
const expenseNameInput = document.getElementById('expense-name');
const expenseAmountInput = document.getElementById('expense-amount');
const expenseCategorySelect = document.getElementById('expense-category');
const calendarView = document.getElementById('calendar-view');

//  「新增支出」按鈕的點擊事件
addBtn.addEventListener('click', function() {
    const date = expenseDateInput.value;
    const name = expenseNameInput.value.trim();
    const amount = expenseAmountInput.value;
    const category = expenseCategorySelect.value;

    //  防呆驗證
    if (!date || !name || !amount) {
        alert("請把日期、消費名稱與金額都填寫完整喔！");
        return;
    }

    //  動態建立一個新的日曆消費項目 HTML 結構
    const newItem = document.createElement('div');
    newItem.classList.add('day-item');
    newItem.innerHTML = `
        <strong>${date}</strong>
        <div style="font-size: 14px; color: #555; margin-top: 5px;">
            • ${name}: $${amount} (${category})
        </div>
    `;

    //  把這筆新資料塞進左側的日曆檢視區塊中
    calendarView.appendChild(newItem);

    //  清空輸入框，方便下一次輸入
    expenseNameInput.value = '';
    expenseAmountInput.value = '';
    
    alert("成功新增一筆消費紀錄！");
});

開發過程中的小插曲與排查紀錄

• 狀況：一開始在編寫 JavaScript 時，常常會因為變數名稱沒對準 HTML 裡的 id，導致點擊按鈕時完全沒有反應。
• 解決方式：透過瀏覽器的開發者工具（F12 的 Console 面板）檢查錯誤訊息，確認每個 getElementById 抓到的 ID 都跟 HTML 裡的一模一樣，順利解決了抓不到元素的問題！

明天我們會做消費清單列表與刪除、修改介面，明天見，中秋節快樂。