Can anyone explain the following code for me?

  const itemNumber = movieLists[i].querySelectorAll("img").length;
  let clickCounter = 0;
  arrow.addEventListener("click", () => {
    const ratio = Math.floor(window.innerWidth / 270);
    if (itemNumber - (4 + clickCounter) + (4 - ratio) >= 0) {
      movieLists[i].style.transform = `translateX(${                                                                        (line11)
        movieLists[i].computedStyleMap().get("transform")[0].x.value - 300
    } else {
      movieLists[i].style.transform = "translateX(0)";
      clickCounter = 0;

Can anyone tell me what the ‘[i]’ stands or represents for?
What does the ‘x.value’ represent for?

Please view the full set of code in the link of Codepen below.

It’s supposed to be an image carousel of sorts when you click the arrow icon but it doesn’t work, among other issues. Since you are asking how it works I am assuming it is not your code. Does the code do what you think it should do?

Also, if I’m wrong on the following someone correct me:

const itemNumber = movieLists[i].querySelectorAll("img").length;

movieLists is a variable which was previously queried on the DOM returning a node list:

const movieLists = document.querySelectorAll(".movie-list");

querySelectorAll queries the DOM.

moviesLists is a variable which is a node list not the DOM, so this is invalid:

const itemNumber = movieLists[i].querySelectorAll("img").length;

because movieLists is not the DOM.

So, I think this is bad code. But like I said if I’m wrong I would like to know, I’m always willing to learn something.

Thank you for your response. I will pore over them.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.