D55_W7 寫作業，拆任務

HW1 任務拆解：

檢查所有必要輸入欄位是否為空
- 如果為空，顯示紅字
- 全部填完，顯示 alert
1'47": 先在 CSS 顯示紅字
3'00": 先偵測 submit 事件，addEventListener
- 把事件放在 form 的送出功能（submit）上才對，只加在按鈕不行（因為按 enter 也可以送出），所以我們要阻止的是送出功能
- 接著先阻止 submit 預設事件
5'00" 看表單有沒有填內容
- 去拿 required 底下的 text
- checkbox 額外處理，因為性質不同
7'30" 修表單 html 結構，required 要在上一層，才能取到 required 底下的東西
8'15" 操作 input 的資料
9'00" 沒有填就加錯誤訊息
12'50" 沒有填就加錯誤訊息，比較好的做法
- 13'38" 先在 html 加上想要顯示的訊息
- 14'00" hide error
- 14'36" - 19'35" hide error + 調整高度
  - display: none and visibility: hidden
19'52": 拿到輸入訊息資料
21'45": 對 checkbox 做檢查
26'34": 兩種檢查方法的差別：
- 找所有 required 底下的 input 判斷裡面有沒有值，找到 parent 加 css class，顯示或不顯示錯誤
- 去找所有 required 的 div，往下找 radio
27'19" 重構程式碼
- 找 required 底下的東西
32'20": 重整邏輯，重點是選對東西
34'30": alert 填好的資料
36'20": 整理邏輯
- 對 form 加 submit 事件
- 看欄位驗證沒有有過
- 去找 required 元素
- 底下元素如果是 input 把 value 放進去，反之則出現錯誤訊息
- 如果是 radio，有就把 value 放進去
- 最後面統一檢查有沒有過驗證
- 38'30": 解釋擴充性

HW2 解題想法

先把 FAQ 版面切出來
實作「點開後展開答案」功能

HW2 任務拆解

參考範例：hw2 FAQ 頁面（請先寫完作業再看）

1'30" 開始切版
9'30" 收縮功能
12'35" 點擊事件

HW2 實作


document
  .querySelector('.questions')
  .addEventListener('click', function(e) {
    const clickArea = e.target.closest('.q-block')
    if (clickArea) {
      clickArea.classList.toggle('q-block--hide')
    }
  })

// 先選到 questions 這個 class 的元素

// 監聽 questions 裡面的 click 事件

// 給一個變數叫做點擊範圍

// e.target 觸發事件的元素（點擊的地方）

// .closest 從當前元素開始，往回到第一個祖父元素

// e.target.closest('.q-block') 在 q-block 裡面發生點擊事件，
// 就從自己本身開始找，直到第一個祖父元素

// classList.toggle()，有就刪除，沒有就加回來
// （像是電燈開關吧，按一下開燈，再按一下關燈）

// 如果「有偵測到點擊事件，就把留言打開或關閉」

參考資料：

e.target

closest()

Element.classList

html, css 重點：

要知道分幾塊

在一整塊留言裡面，assign 兩個變數，一個是 q-block, q-block--hide

q-block 拿來做 overflow: hidden
q-block--hide: 限制高度