🏅 Day 38 - data-* 屬性應用

可以在 HTML 標籤自訂 data-* 屬性，寫法：data-自訂名稱="值"


<p data-task="daily">每日任務</p>

data-* 屬性可以像其他屬性一樣使用 .getAttribute 取得屬性值：

HTML


<p class="title" data-content="文字">data-* 屬性</p>


const title = document.querySelector('.title');
console.log(title.getAttribute('data-content'));

除了 .getAttribute 以外， data-* 也可以用 document.querySelector 選取，例如：

HTML


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

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





// 1 取得所有 data-title 選擇第0項
document.querySelectorAll('[data-title]')[0];

// 2 直接輸入完整的資料選取
document.querySelector("[data-title='信箱']");

另外，也可以透過事件綁定來取得 data-*，例如：

HTML


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




const alertMsg = document.querySelector('.alertMsg');
alertMsg.addEventListener('click', function(e) {
  console.log(e.target.dataset.title);
})

問題

請使用這個 CodePen 做練習，當點擊「加入 alert 文字」按鈕後，將會在對應的
<p class="alertMsg"></p> 標籤中填入警示文字，HTML 畫面渲染如下圖：

Image Not Showing Possible Reasons

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

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

Image Not Showing Possible Reasons