---
# System prepended metadata

title: "\U0001F3C5 4/7 (三) 每日任務"
tags: [直播班每日任務]

---

# 🏅 4/7 (三) 每日任務
###### tags: `直播班每日任務`

data-屬性應用
---
對應章節: https://courses.hexschool.com/courses/1289881/lectures/31463154

#### 小教學
除了影音提到的 `.getAttreibute` 以外， `data-xxx`  也可以用 `document.querySelector` 選取，例如:

HTML
```htmlembedded=
<p class="alertMsg" data-title="信箱"></p>
<p class="alertMsg" data-title="密碼"></p>
```
取得 「data-title="信箱"」p 標籤的方式有兩種:

JS
```js=
// 1
document.querySelectorAll('[data-title]')[0];

// 2
document.querySelector("[data-title='信箱']");
```

另外，也可以透過事件綁定來取得 `data-xxx`，例如:

HTML
```htmlembedded=
<p class="alertMsg" data-title="信箱">點我會顯示 dataset</p>
```
JS
```js=
let alertMsg = document.querySelector('.alertMsg');
alertMsg.addEventListener('click', function(e) {
    console.log(e.target.dataset.title);
})
```


問題
---
請使用 [這個 CodePen](https://codepen.io/znlcgmgk/pen/jOyLEGO?editors=1011) 做練習，當點擊「加入 alert 文字」按鈕後，將會在對應的 
`<p class="alertMsg"></p>` 標籤中填入警示文字，HTML 畫面渲染如下圖:

![](https://i.imgur.com/ufvuyCh.png)


> 注意，「信箱 必填」的「信箱」、「密碼 必填」的「密碼」需取用 data-title 的內容。

回報流程
---
將答案寫在 CodePen 並複製 CodePen 連結貼至 thread 中回報就算完成了喔! 解答請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/6UoJVtD.png)

<!-- 解答 (JS)
let addBtn  = document.querySelector('.addBtn');
let alertMsgAll = document.querySelectorAll('[data-title]');

addBtn.addEventListener('click', addAlertMsg);
function addAlertMsg() {
  alertMsgAll.forEach(function(item) {
    item.textContent = `${item.dataset.title} 必填!`;
  })
}
-->