Error encountered: When trying to pass an event and two variables, the function e.preventDefault is not recognized as a valid

Question

Error encountered: When trying to pass an event and two variables, the function e.preventDefault is not recognized as a valid

As a beginner in JS, I thought I had event handlers figured out. After hours of searching for a solution, I'm stuck. I'm trying to create a carousel, and while it mostly works, when I attempt to pass an event handler and two variables from one function to another, I get a console error: "Uncaught TypeError: e.preventDefault is not a function". If someone could help me understand what I'm doing wrong, I would greatly appreciate it. Here's 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, activeClassNumberConstants) {
    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, activeClassNumberConstants) {
    e.preventDefault();
    boxList.forEach(el => {
        el.classList.remove("active");
    });
      
    activeClassNumber = activeClassNumber - activeClassNumberConstants;
    const slicedArr = boxListArr.slice(activeClassNumber - activeClassNumberConstants, 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 activeClassNumberConstants = document.querySelectorAll(".active").length;

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

        boxList.forEach(el => el.classList.remove("active"));
        activeElements.forEach(el => el.classList.add("active"));
    }
}

mediaQuery.addListener(handleDesktopChange)
handleDesktopChange(mediaQuery)

javascript

Answer 1

Answer №1

Make sure to use the following code instead:

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

The issue lies in not passing the event as an argument to the clickRight function, resulting in it being undefined.

Essentially, your current approach executes the function and expects its return to act as the event handler.

Diving Deeper into this Concept

In the code example provided:

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

window.addEventListener("keydown", keyChangeSlide)

This works effectively as it is translated to:

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

The crucial points here are that it operates as a callback function and accepts e as a parameter within the callback.

On the other hand, your implementation based on the given example would have appeared like this:

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

Which would have resulted in:

window.addEventListener("keydown", undefined)

Why is that?

This is because you need to provide a function as the second parameter for the addEventListener function. By calling a function with a parameter, you end up passing the return value of the function, which is ultimately undefined in this case due to no explicit return statement.

The error occurred because the argument e was passed as undefined in that context.

Answer 2

Make sure to use the following code instead:

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

The issue lies in not passing the event as an argument to the clickRight function, resulting in it being undefined.

Essentially, your current approach executes the function and expects its return to act as the event handler.

Diving Deeper into this Concept

In the code example provided:

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

window.addEventListener("keydown", keyChangeSlide)

This works effectively as it is translated to:

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

The crucial points here are that it operates as a callback function and accepts e as a parameter within the callback.

On the other hand, your implementation based on the given example would have appeared like this:

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

Which would have resulted in:

window.addEventListener("keydown", undefined)

Why is that?

This is because you need to provide a function as the second parameter for the addEventListener function. By calling a function with a parameter, you end up passing the return value of the function, which is ultimately undefined in this case due to no explicit return statement.

The error occurred because the argument e was passed as undefined in that context.

Answer 3

Answer №2

modify:

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

as follows:

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

Answer 4

modify:

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

as follows:

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

Error encountered: When trying to pass an event and two variables, the function e.preventDefault is not recognized as a valid

Answer №1

Diving Deeper into this Concept

Answer №2

Similar questions

Tips for sending data from a JSP to a Servlet with Javascript

Undefined value is encountered when passing props through the Context API in a REACT application

Is it possible to import a component from a production build of create-react-app?

"Transferring a JavaScript variable to Twig: A step-by-step guide for this specific scenario

Achieve a new line break when the user hits the "Enter" key using HTML and JavaScript

The behavior of CSS position: sticky varies depending on whether the user is scrolling up or scrolling down

Unable to use the .focus() method on a Link component by utilizing references in React Router 4

Having trouble rendering a dynamic table with JavaScript utilizing a JSON object

Creating a primary php file in Apache without the use of SQL or any database: is it possible?

Adjusting the overflow of a parent div based on the position of the div within it by scrolling

What is the ideal destination for my Ajax request to be sent?

Floating Action Button combined with a Material UI ListItem

Preserve multiple selected values post form submission using PHP, HTML, and JavaScript

What is the best way to invoke a function in one View Model from within another View Model?

Concealing the source code within a Next.js application

Is there a way to consistently substitute a specific path parameter with a different value within node.js?

Tips for including MUI icon within a list displayed on a map:

tips for incorporating async/await within a promise

Ensure data accuracy by triggering the cache - implementing SWR hook in Next.js with TypeScript

What sets apart `var now = new Date();` and `var now = Date();` in JavaScript