How to change this code to normal function?

Question

Hello everyone can anyone help me to convert this code by using normal function without using the arrow function.Your kind help will help me alot to accomplish my project

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

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

Answer 1

Here you go

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

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