How to change this code to normal function?-CodePudding

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;
 }
});

CodePudding user response：

You can change (...)=>{} to function(...){} any time. Arrows functions are however supported in all browsers (except IE)

CodePudding user response：

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;
 }
});