tags: 2019年鐵人賽 、 JS

功能

假設網頁需要 5 個按鈕，每次按都需要顯示按到哪個按鈕，如下圖

想法分析

1. 最先想到在 html 檔放 5 個 <button>，和 1 個 <p> 以出現文字

<div id="buttons">
  <button>按1</button>
  <button>按2</button>
  <button>按3</button>
  <button>按4</button>
  <button>按5</button>
</div>
<p></p>

2. 用 addEventListener 監聽按鈕，當 click 時呼叫 function showText() 出現文字

function showText(){
  let pTag = document.querySelector('p'); //取得 p 節點
  pTag.textContent = "按過了"; //p 節點塞入文字
}

let btns = document.querySelectorAll('button'); //取得按鈕的 NodeList
for(let i = 0; i < btns.length; i++){
  btns[i].addEventListener('click',showText); //對每個按鈕掛上監聽事件
}

3. 讓文字出現「按1」~「按5」，需要把 i 傳給 function 使用

原本很天真的寫成

function showText(i){
  let pTag = document.querySelector('p');
  pTag.textContent = `按${i+1}`;
}

let btns = document.querySelectorAll('button');
for(let i = 0; i < btns.length; i++){
  btns[i].addEventListener('click',showText(i));
}

但是這樣是直接讓 function showText() 執行啊！

後來查了 MDN，改用匿名函數(anonymous function)的方式傳遞終於成功了！

function showText(i){
  let pTag = document.querySelector('p');
  pTag.textContent = `按${i+1}`; //p 節點塞入文字
}

let btns = document.querySelectorAll('button');
for(let i = 0; i < btns.length; i++){
  btns[i].addEventListener('click',function(){showText(i)}); //用匿名函數傳遞 i
}

4. 以為可以打完收工了...

5. 如果功能改成要 10/20/30 個按鈕還要這樣手打麵嗎...

6. 用 for 迴圈產生 <button>

<div id="buttons"></div>
<p></p>

let divTag = document.querySelector('div');
for(let j = 1; j <= 10; j++){
  let btnTag = document.createElement('button'); //做一個 button tag
  btnTag.textContent = `按${j}`; //button tag 塞入文字
  divTag.appendChild(btnTag); //放入 div tag 中
}

7. 完成版

<div id="buttons"></div>
<p></p>

function showText(i){
  let pTag = document.querySelector('p'); //取得 p 節點
  pTag.textContent = `按${i+1}`; //p 節點塞入文字
}

let divTag = document.querySelector('div'); //取得 div 節點
for(let j = 1; j <= 10; j++){
  let btnTag = document.createElement('button'); //做一個 button tag
  btnTag.textContent = `按${j}`; //button tag 塞入文字
  divTag.appendChild(btnTag); //放入 div tag 中
}

let btns = document.querySelectorAll('button'); //取得按鈕的 NodeList
for(let i = 0; i < btns.length; i++){
  btns[i].addEventListener('click',function(){showText(i)}); //對每個按鈕掛上監聽事件，用匿名函數傳遞 i
}