为快照 Firestore 中的每个元素添加事件侦听器

Question

I have the following code that gets a snapshot from my Firestore collection called banner . Each object has the following structure

{
   index: // each object has index
   image: // url of source image
   link: // link to be redirected when clicked the image
}

Here is the HTML code where I dynamically add elements to HTML from my collection, I have 5 images in this case

<div id="homepage-background" class="background">
      <img class="bg" src="https://firebasestorage.googleapis.com/v0/b....">
      <img class="bg" src="https://firebasestorage.googleapis.com/v0/b....">
      <img class="bg" src="https://firebasestorage.googleapis.com/v0/b....">
      <img class="bg" src="https://firebasestorage.googleapis.com/v0/b....">
      <img class="bg" src="https://firebasestorage.googleapis.com/v0/b....">
</div>

And here is the function

    let homepageBackground = document.getElementById("homepage-background");

    firebase
      .firestore()
      .collection("banner")
      .orderBy("index")
      .get()
      .then((snapshot) => {
        let array = snapshot.docs;

        for (let i = 0; i < array.length; i++) {
            console.log(array[i].data());
            console.log("i before " + i);

            let imgBackground = document.createElement("img");
            imgBackground.setAttribute("class", "bg");
            imgBackground.setAttribute("src", array[i].image);
            imgBackground.setAttribute("data-index", i);
            console.log("i after " + i);
  
            imgBackground.addEventListener("click", function () {
              const alertText = imgBackground.getAttribute("data-index");
              alert(alertText);
            });
            homepageBackground.appendChild(imgBackground);
        }
      })
      .catch((error) => {
        console.log(error);
      });

The problem is the each image I click, it alerts 5 , the index of the last element in my collection. I expect that when I click on the first picture to get an alert with 1 , click on second picture, get an alert of 2 and so on until the fifth picture to get an alert of 5 . Somehow that index attribute of each document from collection is not displayed correctly since no matter picture I click, I get an alert of 5 , index of the last element. I believe the problem is with addEventListener() function that might have been assigned only to the last HTML element because it always displays 5 .

I am not quite sure why is it not working and what should I do to fix.

EDIT

I have added 2 console logs, before and after imgBackground.setAttribute("data-index", i);

and it displays the following once the page is loaded

i before 0
i after 0
i before 1
i after 1
i before 2
i after 2
i before 3
i after 3
i before 4
i after 4

My assumption is that all images are already rendered to the HTML since they are displayed correctly to the screen. But only that after the loop i was set last index. I have to mention that I have one more script file that is responsible for sliding the images in the page. It is just a setInterval() that runs every 5 seconds and adds show class to each img from that div . The following is the script.

  document.addEventListener(
    "load",
    function () {
      let slider = document.querySelector(".slider");
      let buttons = document.querySelectorAll(".btn");
      let slides = document.querySelectorAll(".img");
      let backgrounds = document.querySelectorAll(".bg");
      let options = document.querySelectorAll(".option");

      let element = document.getElementById("homepage-background");
      let numberOfChildren = element.getElementsByTagName("img").length;

      let index = 1;
      let op_index = 0;

      let size = slides[index].clientWidth;

      update();

      function update() {
        slider.style.transform = "translateX(" + -size * index + "px)";

        backgrounds.forEach((img) => img.classList.remove("show"));
        backgrounds[op_index].classList.add("show");

        options.forEach((op) => op.classList.remove("colored"));
        options[op_index].classList.add("colored");
      }

      function slide() {
        slider.style.transition = "transform .5s ease-in-out";
        update();
      }

      function btnCheck() {
        if (this.id === "prev") {
          index--;

          if (op_index === 0) {
            op_index = numberOfChildren - 1;
          } else {
            op_index--;
          }
        } else {
          index++;

          if (op_index === numberOfChildren - 1) {
            op_index = 0;
          } else {
            op_index++;
          }
        }
        slide();
      }

      slider.addEventListener("transitionend", () => {
        if (index >= numberOfChildren - 1) {
          return;
        }
        if (index <= 0) {
          return;
        }
        if (slides[index].id === "fist") {
          slider.style.transition = "none";
          index = slides.length - 2;
          slider.style.transform = "translateX(" + -size * index + "px)";
        } else if (slides[index].id === "last") {
          slider.style.transition = "none";
          index = 1;
          slider.style.transform = "translateX(" + -size * index + "px)";
        }
      });

      buttons.forEach((btn) => btn.addEventListener("click", btnCheck));
      options.forEach((option) => option.addEventListener("click", optionFunc));

      setInterval(btnCheck, 5000);
    },
    5000
  );

Answer 1

By the time the page renders, the loop has terminated and i == 5 , which is why your test alert always shows 5.

I agree with @Marc that you should associate the element with its index and store it somewhere inside the loop.

modified from here :

...
for (let i = 0; i < array.length; i++) {
  ...
  // SET attribute "data-index"
  imgBackground.setAttribute("data-index", i) // or array[i].data().index, which appears to be the same thing based on your description
  
  imgBackground.addEventListener("click", function () {
    // GET attribute "data-index"
    const alertText = imgBackground.getAttribute('data-index')
    alert(alertText);
    ...
  });
  ...
}
...

Tested in developer console and working.