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

Prioritizing the execution order of useEffect in Next.js

Declaring a variable outside of a function or object

Upgrading the entire document's content using jQuery

Unit test: Passing a deeply nested object as a prop to a React component

Unclear value of button when being passed

Utilize the "incorporate" feature to include any string within an array

Preserve the values of checkboxes throughout the entire website by utilizing localStorage

Bring in styles from the API within Angular

Node.js is throwing an error code 344, indicating that it is not possible to manipulate headers after they have already been

What are the steps to crafting a basic JavaScript or jQuery function within CodeIgniter?

Extend JavaScript capabilities for window.print() function to automatically include backgrounds

"Utilize Vuejs to establish a binding between two objects when necessary

An unexpected 'undefined' occasionally tacked onto 1% of the URLs visitors requested on my website starting from June 12, 2012

Endless cycle of React hooks

Attempting to grasp the fundamentals of angular Routing, however, upon attempting to reload the page, nothing appears to be displayed

Can you determine if the user is holding the CTRL key in a universally recognized way?

Ways to verify AJAX Response String when data format is specified as JSON

Issue encountered when setting a background image in Angular

Highcharts JS encountered an error: x[(intermediate value)(intermediate value)(intermediate value)] is not a valid constructor

How can I transfer data from two queries to Jade using Node.js (Express.js)?