# 🏅 DAY38 每日任務
###### tags: `JS 直播班 - 2021 秋季班`

data-屬性應用
---

#### 小教學
除了[影音](https://courses.hexschool.com/courses/20201113/lectures/34094845)提到的 `.getAttribute` 以外， `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} 必填!`;
})
}
-->
| Slack | CodePen |
|:----------------:|:-------------------:|
| Karen Huang | https://codepen.io/Coding_Snorlax/pen/OJxPXgE|
| 蔡明達 | https://codepen.io/bmzpfyxe/pen/NWgKQZB?editors=0011 |
| Iris Huang | https://codepen.io/ythuang/pen/LYzEZdy |
|CloThEs | https://codepen.io/bogwdnxx-the-sans/pen/zYExBWq|
| YC | https://codepen.io/YCLu/pen/abLzZjB |
| 米米 | https://codepen.io/Jameshsu0407/pen/qBPENGP?editors=1011 |
|lumei|https://codepen.io/l_umei/pen/WNZbGwN|
|Aaron Tu|https://codepen.io/aarontu/pen/poWvbBv|
| 傅劍軒 | https://codepen.io/seonkuraito/pen/wvrBWmQ?editors=0011 |
|群嘉|https://codepen.io/efzdamnp-the-lessful/pen/NWaPrmV?editors=1011|
|Genos|https://codepen.io/pb220416/pen/xxXbELY|
Tim Lin|https://codepen.io/TimmyLin/pen/qBPEabp
| Yunei | https://codepen.io/Yunei/pen/zYExKrw |
| Gill | https://codepen.io/Gill-Chin/pen/MWEYjvJ?editors=1011 |
|有廖先生(Rain)| https://codepen.io/billpop741/pen/OJxPXra |
| Jun Ting Lin | https://codepen.io/jake1155/pen/MWEYjXm |
|AKI|https://codepen.io/akichen27/pen/YzrPGgb|
| Sam | https://codepen.io/sam-hsu/pen/MWEYjbb |
|Cheng pei-hsuan|https://codepen.io/PaCheng/pen/qBPEazL|
|kk|https://codepen.io/potatokaka/pen/ZEXYBXM?editors=1011|
|Louis| https://codepen.io/Louis164156/pen/VwMYKbE?editors=1111 |
| Peter Chen | https://codepen.io/yuckugjy-the-sasster/pen/MWEYpQp |
| Kelvin Hsu | https://codepen.io/kelvin001/pen/LYzEWRd?editors=1011
|張喆|https://codepen.io/wow767t/pen/jOGEmZZ|
|Bonnie|https://codepen.io/bonnieli1414/pen/oNGgWev |
|Yashien Lin|https://codepen.io/YashienLin/pen/mdBywdm?editors=1011 |
|陳暐中|https://codepen.io/wei-z/pen/zYExzOg?editors=1011 |
|POPEYE| https://codepen.io/popeye_ux/pen/QWqwVyL |
|tingyu|https://codepen.io/dgltu/pen/xxXbOed|
|Calon| https://codepen.io/Calon0118/pen/wvrByWo|
|洋蔥|https://codepen.io/oikdkmxq-the-looper/pen/eYGmVmV?editors=1011|
| Steven Chan |https://codepen.io/Steven1220/pen/LYzEjdB?editors=1011 |
| 小K | https://codepen.io/kelen1995/pen/XWeJYQQ |
| 黃士桓 | https://codepen.io/shr-huan-huang/pen/OJxPwZw?editors=1011 |
| yunyi | https://codepen.io/yunyi12374/pen/bGoNjgK?editors=1011 |
|吉兒| https://codepen.io/Jillkate/pen/JjrozzW |
|Jasper|https://codepen.io/li-jasper/pen/jOGPNbB |
|YuriT | https://codepen.io/wenfisht/pen/JjrdPNx |
| Lai | https://codepen.io/co_lai/pen/ExwjYdM |
|鄭安志|https://codepen.io/lwmtsgek/pen/mdBJVRz?editors=1011|
|Trista|https://codepen.io/trista6140/pen/MWEweLg|
|PeggyTsai|https://codepen.io/pei-chi-tsai/pen/LYzVypX?editors=1011|
| 劉維倫 | https://codepen.io/lun0223/pen/KKXpGPg?editors=1111 |
| Sylvia-H | https://codepen.io/Cosmosheart/pen/ExwjGVy?editors=1010 |
paul|https://codepen.io/printfootya/pen/xxXGyxj?editors=1011|
|雪莉|https://codepen.io/utshang216/pen/eYGNXwY|
|Sandy|https://codepen.io/Sandy_L/pen/gOGavvO?editors=1111|
| ZOE WU | https://codepen.io/Zoechiueh/pen/PoJZbZL?editors=1010 |
|kailun|https://codepen.io/Kailun/pen/zYEqBxW|
|Jocelyn|https://codepen.io/enjoyful/pen/QWqEvPw?editors=1011|
|danny123| https://codepen.io/binlandz123/pen/VwMjQqx?editors=1010 |
|LTL| https://codepen.io/ltlin93/pen/dyVpbpv?editors=1011 |
|Alvin|https://codepen.io/Alvin20201116/pen/NWarXoz|
|Hamaji|https://codepen.io/hamajibashi/pen/qBPmYQo |
|ZY Hsu|https://codepen.io/zihyin/pen/bGoRKNG?editors=1011 |
|Zooey Cheng |https://codepen.io/noraneko0430/pen/eYGGZMv |