AddEventListener для события щелчка перезаписывается

Я новичок в HTML / JS и пытаюсь изучить все странности. Пытаясь заставить это работать, я узнал, что разрешен только один Element.onclick = function() {}, и если вы попытаетесь добавить больше, предыдущие будут перезаписаны. Но теперь я сталкиваюсь с тем же самым, используя Element.addEventListener("click", function() {}). Вот мой код:

<html>
<body id = "body">

</body>
</html>
<script>
  window.onload = function() {
    for (var buttonText of ["item1", "item2", "item3"]){
      var button = document.createElement("button");
      button.textContent = buttonText;
      button.addEventListener("click", function(){
        console.info(`${buttonText} was clicked!`);
      });
      document.getElementById("body").append(button);
    }
  }
</script>

Независимо от того, какая кнопка нажата, консоль всегда говорит item3 was clicked!. Где я ошибаюсь?

javascript html event-handling addeventlistener

10.04.2021 06:31

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это связано с областью действия переменной. addEventListener добавит событие, и в этот раз, хотя обратный вызов сработает, но цикл завершился, его выполнение, и buttonText будет обновлен с последним значением. Это приводит к тому, что buttonText всегда будет item3. Один из вариантов - заменить for (var buttonText of ["item1", "item2", "item3"]) { на for (let buttonText of ["item1", "item2", "item3"]) {.

window.onload = function() {
  for (let buttonText of ["item1", "item2", "item3"]) {
    let button = document.createElement("button");
    button.textContent = buttonText;
    button.addEventListener("click", function() {
      console.info(`${buttonText} was clicked!`);
    });
    document.getElementById("body").append(button);
  }
}

<div id='body'></div>

Другой вариант - вы можете создать closure и IIFE.

window.onload = function() {
  for (var buttonText of ["item1", "item2", "item3"]) {
    // start of IIFE
    (function(txt) {
      var button = document.createElement("button");
      button.textContent = txt;
      button.addEventListener("click", function() {
        console.info(`${txt} was clicked!`);
      });
      document.getElementById("body").append(button);

    }(buttonText))

  }
}