Распечатайте другое предупреждающее сообщение для каждой кнопки в Javascript [дубликат]

Question

Распечатайте другое предупреждающее сообщение для каждой кнопки в Javascript [дубликат]

На этот вопрос уже есть ответ:

Закрытие JavaScript внутри циклов - простой практический пример 39 ответов

Я пытаюсь распечатать предупреждение для каждой кнопки. Кнопка 1! должен предупредить «Единорога», кнопку 2! должен предупредить «Обнимать!» и кнопка 3! должен предупредить «Свежую прачечную». Вместо этого я получаю «Fresh Laundry» для каждой кнопки.

  <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>

Как я могу получить каждую кнопку, чтобы распечатать соответствующее предупреждение?

javascript,javascript,

0

Ответов: 1

JavaScript, JavaScript,

Похожие вопросы

score 1 · Accepted Answer

1 принят

Поместите обработчик событий в закрытие, иначе btnNumвсегда будет последним, когда будет нажата кнопка.

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>

В качестве альтернативы вы можете просто использовать 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>