這個JavaScript有什麼錯誤？ - interviewcake

我在interviewcake.com上發現這個問題。這個JavaScript有什麼錯誤？ - interviewcake

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

<script type="text/javascript"> 
    var prizes = ['A Unicorn!', 'A Hug!', 'Fresh Laundry!']; 
    for (var btnNum = 0; btnNum < prizes.length; btnNum++) { 
     document.getElementById('btn-' + btnNum).onclick = function() { 
      alert(prizes[btnNum]); 
     }; 
    } 
</script>

點擊任何按鈕，它會提醒'undefined'。無法弄清楚這種意外的行爲。非常感謝您的幫助。

來源

2017-01-19 Priyatam Roy

閉包是這裏的問題。 –

感謝您的鏈接。 –

你的變量'btnNum'在你的情況'btnNum'中的問題是一個全局變量，並且在每次迭代時遞增，最後'btnNum值是3'，'獎品沒有第三個索引'，這就是爲什麼你沒有定義。 –

正如我已經評論的，關閉是個問題，您可以在這裏使用匿名函數並將btnNum作爲參數傳遞。

var prizes = ['A Unicorn!', 'A Hug!', 'Fresh Laundry!']; 
for (var btnNum = 0; btnNum < prizes.length; btnNum++) { 
    (function(x) { 
    document.getElementById('btn-' + x).onclick = function() { 
     alert(prizes[x]); 
    }; 
    })(btnNum); 
}

Demo

如果您是使用細ES6語法，你可以使用let關鍵字來代替var

var prizes = ['A Unicorn!', 'A Hug!', 'Fresh Laundry!']; 
for (let btnNum = 0; btnNum < prizes.length; btnNum++) { 
    //--^-- 
    document.getElementById('btn-' + btnNum).onclick = function() { 
    alert(prizes[btnNum]); 
    }; 
}

來源

2017-01-19 06:05:20

有一個在封閉的循環。所以，你的btnNum永遠是3的onclick

var prizes = ['A Unicorn!', 'A Hug!', 'Fresh Laundry!']; 
 
    for (var btnNum = 0; btnNum < prizes.length; btnNum++) { 
 
     console.log(prizes); 
 
     document.getElementById('btn-' + btnNum).onclick = function() { 
 
     alert(prizes[this.id.replace('btn-', '')]); 
 
     }; 
 
    }

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

來源

2017-01-19 06:11:10

這個JavaScript有什麼錯誤？ - interviewcake

回答

相關問題