JavaScript 循環綁定事件的經典陷阱：<= 導致越界錯誤

錯誤代碼

for (var i = 0; i <= aLi.length; i++) {  // <= 錯誤
  aLi[i].onclick = function() { ... }
}
// 同樣錯誤發生在第二個循環

錯誤分析

• 數組索引範圍：0 ~ length-1
• i <= length 時，最後一次循環 i == length，訪問 aLi[length] 返回 undefined
• undefined.onclick 拋出 TypeError，中斷後續代碼執行，導致第二個循環根本不執行

修正代碼

for (var i = 0; i < aLi.length; i++) {  // < 正確
  aLi[i].onclick = function() {
    document.getElementById('ss').innerHTML = this.innerHTML;
  };
}
for (var j = 0; j < bLi.length; j++) {
  bLi[j].onclick = function() {
    document.getElementById('cc').innerHTML = this.innerHTML;
  };
}

最佳實踐：事件委託

document.getElementById('choose1').addEventListener('click', e => {
  if (e.target.tagName === 'LI') {
    document.getElementById('ss').textContent = e.target.textContent;
  }
});
document.getElementById('choose2').addEventListener('click', e => {
  if (e.target.tagName === 'LI') {
    document.getElementById('cc').textContent = e.target.textContent;
  }
});

優點：只綁定一個監聽器，動態新增 <li> 也生效，避免循環閉包問題。