//JSON
var shops = [{
  keeper: '魯夫'
}, {
  keeper: '香吉士'
}]
//綁定 .list，使用父元素控制子元素
var list = document.querySelector('.list');

//為了把資料回填到 li 中，故透過這個函式將資料抓出後渲染到網頁上
//更新商店資料
function updateList() {
  var str = ''; //組一個字串，內容為空
  var shopLen = shops.length; //資料長度 2
  for (var i = 0; shopLen > i; i++) {
    str += `<li data-num=${i}>${shops[i].keeper}</li>`
  } //字串加總
  list.innerHTML = str; //渲染到字串，並渲染到網頁
  console.log(str);
}
updateList(); //執行函式


// 確認點擊的店長是誰
function checkList(e) {
  var num = e.target.dataset.num; //宣告一個 num ，當事件目標為自己，dataset 取出 num 的值
  console.log(e.target.nodeName); //確認 nodeName 是否為 'LI'
  if (e.target.nodeName !== 'LI') { //若選到的 nodeName 不是 LI，就回傳(停止函式)
    return
  };
  console.log(`你選擇的店長為 ${shops[num].keeper}`); //顯示選擇內容
}

//在 list 新增 click 事件
list.addEventListener('click', checkList, false);