Я новичок в HTML / JS и пытаюсь изучить все странности. Пытаясь заставить это работать, я узнал, что разрешен только один Element.onclick = function () {}, и если вы попытаетесь добавить больше ...

0
derekantrican 10 Апр 2021 в 06:31

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.log(`${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.log(`${txt} was clicked!`);
      });
      document.getElementById("body").append(button);

    }(buttonText))

  }
}
<div id='body'></div>
0
brk 10 Апр 2021 в 03:40