未捕获的类型错误：e.preventDefault 在传递事件和两个变量时不是 function

Question

I'm beginner in JS, and i thought that i understand event handlers. Im searching solution for hours, but nothing works. Im trying to do sort of carousel, and it almost works, but when im trying to pass event handler and two variables from one function to another, console saying this: "Uncaught TypeError: e.preventDefault is not a function". If somebody would explain me what am i doing wrong i will be very grateful. I'm posting my code:

const boxList = document.querySelectorAll(".second-section .js-s19-item"); 
const firstBoxEl = document.querySelector(".second-section .js-s19-item:first-of-type"); 
const lastBoxEl = document.querySelector(".second-section .js-s19-item:last-of-type"); 
const boxListArr = [...boxList];

function clickRight(e, activeClassNumber, activeClassNumberConstans) {
    e.preventDefault();
    boxList.forEach(el => {
    el.classList.remove("active");
   })

   const slicedArr = boxListArr.slice(activeClassNumber, activeClassNumber+activeClassNumber);
   slicedArr.forEach(el => el.classList.add("active"));
   activeClassNumber = activeClassNumber+activeClassNumber;       
  if(firstBoxEl.classList.contains('active')){
   jQuery(".left").css("display", "none");
   jQuery(".right").css("display", "block"); } else if(lastBoxEl.classList.contains('active')){
 jQuery(".left").css("display", "block");  jQuery(".right").css("display", "none"); }else{ jQuery(".left").css("display", "block"); jQuery(".right").css("display", "block"); }
   }


function clickLeft(e, activeClassNumber, activeClassNumberConstans) {
e.preventDefault();
   boxList.forEach(el => {
    el.classList.remove("active");
   })
      activeClassNumber = activeClassNumber-activeClassNumberConstans;
   const slicedArr = boxListArr.slice(activeClassNumber-activeClassNumberConstans, activeClassNumber);
   slicedArr.forEach(el => el.classList.add("active"));
  if(firstBoxEl.classList.contains('active')){
   jQuery(".left").css("display", "none");
   jQuery(".right").css("display", "block"); } else if(lastBoxEl.classList.contains('active')){
 jQuery(".left").css("display", "block");  jQuery(".right").css("display", "none"); }else{ jQuery(".left").css("display", "block"); jQuery(".right").css("display", "block"); }
}

function handleDesktopChange(e) {
  if (e.matches) {
      let activeElements = document.querySelectorAll(".second-section .js-s19-item:nth-child(-n+3)");
      let activeClass = document.querySelectorAll(".active");
      let activeClassNumber = document.querySelectorAll(".active").length;
      let activeClassNumberConstans = document.querySelectorAll(".active").length;
document.querySelector(".right").addEventListener("click", clickRight(e, activeClassNumber, activeClassNumberConstans));
document.querySelector(".left").addEventListener("click", clickLeft(e, activeClassNumber, activeClassNumberConstans));
      boxList.forEach(el => el.classList.remove("active"));
      activeElements.forEach(el => el.classList.add("active"));

  }
}

mediaQuery.addListener(handleDesktopChange)
handleDesktopChange(mediaQuery) ```

Answer 1

You need to write the following instead:

document.querySelector(".right").addEventListener("click", e => clickRight(e, activeClassNumber, activeClassNumberConstans));

You're not passing the event as an argument to the clickRight function, it is undefined.

What's actually happening with your approach is; it executes the function, and expects the return of that function to be the event handler.

---

Going into this a bit further

The example you have provided in the comments:

const keyChangesSlide = (e) => { 
  if(e.keyCode === 37) { 
    changesSlideLeft(); 
  }
};

window.addEventListener("keydown", keyChangeSlide)

Works completely fine. Because this translates into the following:

window.addEventListener("keydown", (e) => {
  if(e.keyCode === 37) { 
    changesSlideLeft(); 
  }
})

The important part here, is that 1. It is a callback function, and 2. It takes e as a parameter from the callback.

Your code however, in regard to the example you have provided, would have looked like the following:

window.addEventListener("keydown", keyChangeSlide(e))

and it would have translated to this:

window.addEventListener("keydown", undefined)

Why?

Because, you must pass a function as the second parameter of the addEventListener function. However, you are calling a function with a parameter, so what you're ultimately passing is the return value of your function, which in this case is undefined , since you don't return anything.

And your error occurred, because you passed the argument e , which in that scope is undefined.

Answer 2

change:

document.querySelector(".right").addEventListener("click", clickRight(e, activeClassNumber, activeClassNumberConstans));
document.querySelector(".left").addEventListener("click", clickLeft(e, activeClassNumber, activeClassNumberConstans));

to:

document.querySelector(".right").addEventListener("click", e => clickRight(e, activeClassNumber, activeClassNumberConstans));
document.querySelector(".left").addEventListener("click", e => clickLeft(e, activeClassNumber, activeClassNumberConstans));