JS 筆記 - Change 事件

change 在 JavaScript 中是好用的工具，尤其是在多項選項的時候

練習主題:

今天要找到支持的球隊裡面的明星球員，以下為球隊與球員資料：

var data = [
  {
    team: "湖人隊",
    player: "Shaquille O'Neal",
  },
  {
    team: "公牛隊",
    player: "Michael Jordan",
  },
  {
    team: "爵士隊",
    player: "Karl Marlon",
  },
];

經典 90 年球隊與球員

HTML 架構

<!-- change 選單 -->
<select id="teamId">
  <option value="湖人隊">湖人隊</option>
  <option value="公牛隊">公牛隊</option>
  <option value="爵士隊">爵士隊</option>
</select>

<!-- 清單內容 -->
<ul class="list"></ul>

可以看到有一選單，裡面有三個選項，並且下方有一個空的 ul，等等要把 JSON 資料透過 change 選單渲染上去。

JS 起手式

先建立好 JS 要做的內容:

var team = document.getElementById("teamId"); //change 選單
var list = document.querySelector(".list"); // 清單內容
//在change選單，建立好 function 名稱
team.addEventListener("change", updateList, false);

主題是要透過 updateList 這個函式中找到支持球隊裡面的明星球員，函式可以這樣寫：

function updateList(e) {
  var select = e.target.value; //宣告這個事件中的目標為選單的值
  var str = ""; //組一個字串
  for (var i = 0; i < dataLen; i++) {
    //用 for 迴圈篩選資料
    if (select == data[i].team) {
      //如選單當中找到 team
      str += "<li>" + data[i].player + "</li>"; //球員名稱字串
    }
  }
  list.innerHTML = str; //將 list 內容丟回字串，印在網頁上
}

建立一個名稱為 updateList 的 function，並且宣告 select 的選單(習慣把變數名稱跟主要功能名稱一樣，比較好對照。) ，並且在 function(e) 參數當中放入 event ，告訴這是一個事件。
事件中的目標為選單的值。
組一個空字串，透過 for 迴圈篩選後，填入選出的值。
字串加總球員名稱。
將 list 內容丟回字串，選染在網頁上。

完整 JS 程式碼:

var team = document.getElementById("teamId"); //change 選單
var list = document.querySelector(".list"); // 清單內容

//在change選單，建立好 function 名稱
team.addEventListener("change", updateList, false);
var dataLen = data.length;

function updateList(e) {
  var select = e.target.value; //宣告這個事件中的目標為選單的值
  var str = ""; //組一個字串
  for (var i = 0; i < dataLen; i++) {
    //用 for 迴圈篩選資料
    if (select == data[i].team) {
      //如選單當中找到 team
      str += "<li>" + data[i].player + "</li>"; //球員名稱字串
    }
  }
  list.innerHTML = str; //將 list 內容丟回字串，印在網頁上
}

這樣就可以透過 Change 選出選項，並且對應相對的內容。
CodePen: https://codepen.io/hnzxewqw/pen/oNXZyNw

心得

透過 change 的 function 內容的建立，執行的順序要一個口令一個動作，拆解流程就會比較好思考。

自己整理的步驟

點選自己的選項的值。
選到自己後，要組字串給清單用。(資料來自於 for)
for 裡面馬上接判斷式，給予要選擇的條件。
在條件內建立要顯示的字串。
並在 for 迴圈外，將要顯示的變數內容，透過 innerHTML = str(資料就會丟回空字串中)。