Onclick event doesn't work after asynchronous function

Question

I'm making a Watchlist app. I got movies via API, rendered them on the page, using fetch/.then methods inside a for loop.

Then after the for loop I try to grab all the buttons "remove" on each movie and add event listener to them, but it doesn't work. Could you please help to correct my bug?

for (let i = 0; i < movies.length; i++) {
  fetch(`https://www.omdbapi.com/?i=${movies[i]}&apikey=123`)
    .then(res => res.json())
    .then(movie => {
        containerList.innerHTML += `<div class="movie"></div>})
    
    //here outside of the loop I write the code that doesn't work
    
    document.querySelectorAll(".buttonClass").forEach(button => {
        button.addEventListener("click", () => {
          localStorage.clear()
          containerList.innerHTML = ""
        })
      })

The last part of code doesn't work, maybe because it's asynchronous and I haven't indicated it in the code. Should I use .finally in this case?

Here's the full page code (only this particular page, there is also the 2d one with the search field): https://codepen.io/btb8293/pen/KKoLOmZ

Thank you in advance!

Answer 1

I am not sure why you want every button to clear localStorage en empty the container, but here is a delegation script https://codepen.io/mplungjan/pen/KKoLOvQ

localStorage has nothing to do with the DOM. You need to have code that adds and removes from the watchlist and each time rewrites localStorage. I see only code the reads the localStorage.

You need to change <div class="movie"> to <div class="movie" data-key="${movies[i]}">

and then you can use parent.dataset.key and do

<!-- language: lang-js -->
const containerList = document.getElementById("containerList");
const noInfoList = document.getElementById("noInfoList");
let watchList = JSON.parse(localStorage.getItem("watchList"));
if (watchList.length===0) watchList= ["tt0089880", "tt0489270"]; // debug - remove after test
console.log(watchList);
containerList.innerHTML = "";
noInfoList.style.display = "none";
watchList.forEach(key => {
  fetch(`https://www.omdbapi.com/?i=${key}&apikey=...`)
    .then((res) => res.json())
    .then((movie) => {
      console.log(movie);
      containerList.innerHTML += `<div class="movie" data-key="${key}">
  <div class="movieImg">
    <img id="poster"src="${movie.Poster}">
  </div>
  <div class="movieInfo">
    <div class="movieNameRate">
      <h3 class="movieName">${movie.Title}</h3>
      <p class="movieRate"><img src="Icon star.png">${movie.imdbRating}</p>
    </div>
    <div class="movieDetails">
      <p class="movieTime">${movie.Runtime}</p>
      <p class="movieGenre">${movie.Genre}</p>
      <button class="remove" id="btt"><img src="Icon -.png"> Remove</button>
    </div>
    <p class="movieDescription">
      ${movie.Plot}</p>
  </div>
</div>`;
    })
});

/*const saveMovie = key => {
  if (!watchList.includes(key)) watchList.push(key);
  localStorage.setItem("watchList", JSON.stringify(watchList));
};*/
const deleteMovie = key => {
  watchList = watchList.filter(item => item !== key);
  localStorage.setItem("watchList", JSON.stringify(watchList));
   console.log("after delete",watchList)
};

containerList.addEventListener("click", (e) => {
  const tgt = e.target.closest(".remove");
  if (tgt) {
    const parent = tgt.closest(".movie");
    console.log("deleting",parent.dataset.key)
    deleteMovie(parent.dataset.key);
    parent.remove();
  }
});