Print a different alert message for each button in Javascript

Question

I am trying to print out an alert for each button. Button 1! should alert 'A Unicorn', Button 2! should alert "A Hug!" and Button 3! should alert "Fresh Laundry". Instead, I get "Fresh Laundry" for each button.

  <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++) {
      var position = prizes[btnNum]
        // for each of our buttons, when the user clicks it...
        document.getElementById('btn-' + btnNum).onclick = function() {
            // tell her what she's won!
            alert(position);
        };
    }
  </script>

How do I get each button to print out the proper alert?

Answer 1

Put the event handler inside a closure, otherwise btnNum will always be the last one by the time the button is clicked.

var prizes = ['A Unicorn!', 'A Hug!', 'Fresh Laundry!'];
for (var btnNum = 0; btnNum < prizes.length; btnNum++) {
  (function(position) {
    document.getElementById('btn-' + btnNum).onclick = function() {
      // tell her what she's won!
      alert(position);
    };
  })(prizes[btnNum]);
}

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

Alternatively, you could just use let.

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

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