有關我正在創建的網頁的問題

Question

大家好，感謝您花時間回答此問題。

在我的網站上，我一直在試圖創建三個按鈕，我已經在html中完成了。

關於JS我做了一個數組或項目，我嘗試使用DOM，所以無論何時somsone點擊一個按鈕相應的項目在數組出現，但因爲它是現在我收到的警報是undefined ...任何人都可以請幫助我並幫助我調試錯誤？

HTML有：

<button id ="btn-0">Button 1!</button> 
<button id ="btn-1">Button 2!</button> 
<button id ="btn-2">Button 3!</button> 

和JS有：

var items = ['Sugar','Tea','Peper'] 
for (var btnNum=0; btnNum <items.length;btnNum++){ 
document.getElementbyId('btn-' + btnNum).onclick = function() { 
alert(items[btnNum]); 
}; 
} 

有人可以告訴我在哪裏，我已經做了一個錯誤的JS代碼，並在我的警覺我收到未定義的，而不是獲得陣列的hte項目？

非常新手JS問題的道歉！

Answer 1

var items = ['Sugar','Tea','Peper'] 
for (var btnNum=0; btnNum <items.length;btnNum++){ 
    (function(btnNum){ 
    document.getElementById('btn-' + btnNum).onclick = function() { 
    alert(items[btnNum]); 
    }; 
    })(btnNum) 

}