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

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

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

HTML

<p class="alertMsg" data-title="信箱"></p>
<p class="alertMsg" data-title="密碼"></p>

取得 「data-title="信箱"」p 標籤的方式有兩種:

JS

// 1
document.querySelectorAll('[data-title]')[0];

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

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

HTML

<p class="alertMsg" data-title="信箱">點我會顯示 dataset</p>

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 畫面渲染如下圖:


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

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


<!-- 解答 (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} 必填!`;
})
}
-->