Предупреждение Javascript вообще не отображается

Question

У меня есть эта функция, которая должна вызывать оповещение при каждом нажатии на одну из кнопок на моей странице, однако ничего не происходит, и если я открываю консоль на веб-странице, ошибки не отображаются. почему?

document.addEventListener('DOMContentLoaded' , () => {
         document.querySelectorAll('.new-button').forEach (button =>  {
                  button.onclick = () => {
                         const buttonName = button.innerHTML;
                         alert(`you have selected the button!  ${buttonName}`);
                  }

         });

});

Я использую версию ES6 JavaScript, если это поможет.

Answer 1

Если вы динамически добавляете элементы, вы должны прикрепить eventListener к некоторому элементу-предку, который был добавлен статически.document работает, но вы можете добавить более конкретные элементы для производительности.Эта концепция называется делегат слушателя .

document.addEventListener('click',function(e){
  if(e.target && e.target.matches('.new-button')){
    const buttonName = e.target.innerHTML;
    alert(`you have selected the button!  ${buttonName}`);
    
    const newButton = document.createElement('button');
    newButton.classList.add('new-button');
    newButton.innerHTML = 'click me!!';
    document.getElementById('container').append(newButton);
  }
});

<div id="container">
  <button class="new-button">click me!</button>
</div>

Answer 2

Разберитесь, проблема в неправильных кавычках, попробуйте использовать "вместо" а также проверьте ваш синтаксис при вызове переменной