事件機制問題

[rdcvgt]

今天在看 FE102 新手 100% 會搞錯的事件機制問題時，有跟著老師實作按鈕回傳數值的狀況，但我發現我在點擊時回傳的資訊都是正確的，好像沒有發生老師所提到點擊任何按鈕都會 alert 6(5+1) （迴圈已跑完）的狀況發生，不確定是我寫的方式不一樣還是說後來有什麼修正嗎？

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="./style.css">
</head>


<body>
	<div>
		<button class='btn'>1</button>
		<button class='btn'>2</button>
		<button class='btn'>3</button>
		<button class='btn'>4</button>
		<button class='btn'>5</button>
	</div>

	<script>
		const element = document.querySelectorAll('.btn')
		for (let i =0; i<element.length; i++){
			element[i].addEventListener('click', function(e){
			console.log(i)
			alert(i+1)
			}
		)
		}

		
	</script>
</body>
</html>

[aszx87410]

因為你迴圈裡面用的是 let i 而非 var i，範例裡面應該是用 var

[rdcvgt]

原來！寫太順手反而沒有注意到這個環節
想順便詢問老師，因為在更之前的課堂其實也有講到 var , let 的差異
在這示範中選用 var 是為了呈現新手誤區嗎？
還是說在這裡的應用，通常使用 var 會比 let 來得好？

[aszx87410]

是喔，是為了呈現常見的錯誤，我記得後面講解法的時候應該有提到用 let 可以解，然後這邊在實作上用 let 會比較好

[rdcvgt]

瞭解！謝謝解答～