Блог

Я изучаю javascript, и я пытаюсь получить доступ к кнопке, которая создается динамически внутри функции. Первая функция createHtml просто получает данные, создает элементы и сохраняет их в переменной, которую я добавляю к элементу html и сохраняю их в beerContainer , и это работает. Однако я не могу использовать кнопку, созданную в функции createHtml. Как я могу заставить всплывающее предупреждение появляться при нажатии на saveBeer?

  let btn = document.querySelector('#myBtn');
    let beerContainer = document.querySelector('#beer-data');

            function createHtml(result) {
            
              var html = '';
              for(let i = 0; i < result.data.length; i  ) {
               
              
                html  =  "<h3>"  result.data[i].name  "</h3>"
                html  =  "<p>"  result.data[i].description  "</p>"
                html  = "<button id='save-beer' data-id='"  result.data[i].id "'>Save Beer</button>"
            
              }
              beerContainer.innerHTML = html;
            }
            
            
            btn.addEventListener('click', function(event) { 
              fetchApiData(createHtml);
            });

var saveBeer = document.querySelector('.save-beer');

saveBeer.addEventListener('click', function(event) { 
 alert("Hi");

});
 

попробуйте использовать

     var saveBeer = document.querySelector('#save-beer'); // access by id
 

вместо

    var saveBeer = document.querySelector('.save-beer'); // trying to access by class which does not exist
 

Обратите внимание на ‘#’, а не на ‘.’ в аргументе querySelector