🗞 8/20 (五) － 取消表單預設效果

<a class="myLink" href="https://www.hexschool.com/">連結</a>

//先透過 querySelector 選取 class myLink
const myLink = document.querySelector(".myLink");

//監聽使用者點擊就會執行大括號的內容
myLink.addEventListener('click',function(e){
  e.preventDefault();//阻止 a 標籤默認行為，所以不會轉址
  console.log("有被點擊到");
})

<form action="#">
    帳號:
    <input type="text" name="email"> 
    <br>
    密碼:
    <input type="text" name="passward"> 
    <input type="submit" value="送出">
</form>

//先透過 querySelector 選取 form
const form = document.querySelector("form");

//監聽使用者點擊就會執行大括號的內容
form.addEventListener("click", function (e) {
  e.preventDefault();//阻止 submit 屬性默認行為，所以不會提交資料
});

/* 步驟一 */
//請透過 querySelector 選取下方 5 個 HTML 標籤
//<input type="text" class="form-control" id="input-name" value="小龜">
//<input type="numbr" class="form-control" id="input-age" value="1987年2月30日">
//<span class="name"></span>
//<p class="birthday border-bottom pb-1"></p>
//<button type="submit" class="send btn btn-light btn-lg">送出</button>





/* 步驟二 */
//請利用步驟一選取的 button 送出按鈕
//透過 addEventListener 監聽 'click' 事件

/* 步驟三 */
//請注意：以下步驟皆在步驟二監聽函式的{}大括號內處理
//使用 e.preventDefault() 阻止 submit 效果
//使用 .value 的方式取出步驟一選取的 input id="input-name" 欄位值
//將 input 欄位的值，使用 textContent 的方式，賦予到步驟一選取的：
//<span class="name"></span>


//使用 .value 的方式取出步驟一選取的 input id="input-age" 欄位值
//將步驟一選取的 <p class="birthday border-bottom pb-1"></p>
//使用 innerHTML 輸出： <span class="birthday">出生日期：${id="input-age欄位值}</span>