本篇文章目錄

1. 前言：提升 UX 的關鍵 —— 唯有需要的欄位才顯示！
2. JS 事件機制：什麼時候該使用 change 事件？
3. 實戰切換：classList.add() / remove() 與 classList.toggle() 的應用
4. 完整程式碼實作：監聽下拉選單並動態隱藏/顯示欄位
5. 結語

一、 前言：提升 UX 的關鍵 —— 唯有需要的欄位才顯示！

在設計複雜表單時，如果將「兒童年齡」與「兒童體重」這兩個欄位同時列在畫面上，使用者很容易感到困惑：「我是兩個都要填，還是選一個填就好？」

好的 UI/UX 設計應該「只在正確的時機，呈現需要的欄位」。今天我們將透過 JavaScript 監聽「換算依據」下拉選單（<select>）的切換，當使用者選擇「依年齡」時只顯示年齡欄位，選擇「依體重」時則無縫切換至體重欄位。

二、 JS 事件機制：什麼時候該使用 change 事件？

在前面的文章中，我們最常用的是點擊按鈕時觸發的 click 事件。但在處理表單元件時，change 事件則是另一個核心利器：

• click 事件：當滑鼠點擊元素時立刻觸發。
• change 事件：專門用於 <select> 下拉選單、<input type="checkbox"> 或 <input type="radio">。當使用者選取項目的內容發生改變時，才會被觸發。

透過監聽下拉選單的 change 事件，我們可以第一時間取得使用者選擇的 event.target.value（或 selectElement.value），並據此調整 UI 介面。

三、 實戰切換：DOM 樣式控制 classList

為了讓 CSS 與 JavaScript 職責分離，我們不會直接在 JS 裡面寫死 style.display = "none"，而是透過增刪 CSS Class 來控制顯示狀態：

/* style.css

.hidden {
  display: none !important;
}

在 JavaScript 中，我們可以使用原生 DOM API 進行 Class 的管理：

• element.classList.add("hidden")：加入隱藏類別。
• element.classList.remove("hidden")：移除隱藏類別（使其恢復顯示）。

四、 完整程式碼實作：連動下拉選單與欄位切換

我們來編寫連動這兩個欄位的核心 JavaScript 程式碼：

/tool2-dosage.js

程式碼亮點解析：

1. e.target.value 取得即時數值：透過事件物件 e 取得目前選取的 <option> 值（age 或 weight）。
2. 條件式精準切換：使用 if...else 確保兩個欄位呈現互斥狀態（一個顯示時，另一個必定隱藏），大幅降低使用者的視覺認知負擔。

五、 結語

透過 change 事件與 classList 的靈活搭配，我們的 [Tool 2] 兒童用藥劑量換算器已經擁有了極具互動感與親和力的動態表單介面！

在明天的 [Day 16] 中，我們將正式加入「✨ 換算兒童劑量」按鈕的點擊事件，並撰寫 揚氏公式 (Young's Rule) 與 克拉克公式 (Clark's Rule) 的核心數學邏輯，完成劑量的推算和渲染。