Блог

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

 async function overViewMaker(){
  const response = await fetch(api_url_overview.concat(api_key));
  let data = await response.json();
  data = data.results.lists;
  data.forEach(book => {
      let mybook = book.books;
      mybook.forEach(eachbook => {
      var book_div = document.getElementById('book_list');
      var liTag = document.createElement("li");
      var aTag = document.createElement("buttom");
      var inpuHidden = document.createElement("input");
      inpuHidden.setAttribute("type", "hidden");
      inpuHidden.value = eachbook.title;
      aTag.appendChild(inpuHidden);
      liTag.appendChild(aTag);
      book_div.appendChild(liTag);        
      });
  });
}
 

Каждая кнопка уже является объектом элемента, и поэтому вы можете использовать addEventListener ее непосредственно на элементе.

 async function overViewMaker() {
    const response = await fetch(api_url_overview.concat(api_key));
    let data = await response.json();
    data = data.results.lists;

    // moved book_div out of for loop so it doesn't need to be re-queried for every book
    var book_div = document.getElementById("book_list");

    data.forEach((book) => {
        let mybook = book.books;
        mybook.forEach((eachbook) => {
            var liTag = document.createElement("li");
            var aTag = document.createElement("button");

            var inpuHidden = document.createElement("input");
            inpuHidden.setAttribute("type", "hidden");
            inpuHidden.value = eachbook.title;
            aTag.appendChild(inpuHidden);

            aTag.addEventListener("click", (ev) => {
                // you don't need to get book title from the hidden input element since it is in the scope
                // inputHidden.value is also accessible from inside of here
                const title = eachBook.title;
                console.log(title);
            });

            liTag.appendChild(aTag);
            book_div.appendChild(liTag);
        });
    });