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

There are arrow functions in js and you also have functions on an object called arrow :D this is confusing — nilskch, Aug 06 '22 at 09:16
What help you do need? There's no use of `this` in your code, so there shouldn't be any surprises when swapping out the syntax. — Quentin, Aug 06 '22 at 09:17

score 1 · Answer 1 · answered Aug 06 '22 at 09:15

1

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

answered Aug 06 '22 at 09:15

CleverSkull

479
3
10

score 0 · Accepted Answer · answered Aug 06 '22 at 09:15

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

How to change this code to normal function?

2 Answers2