Using the named function and function parameter to call `preventDefault()` and avoid the default

Question

Using the named function and function parameter to call `preventDefault()` and avoid the default

I want to incorporate an e.preventDefault() call in my event listener. My function, "voteNoClick", needs to receive a parameter named "direction". How can I pass both the direction parameter and the event object into the function, allowing me to include e.preventDefault() within it? Whenever I try to add the event "e" as a parameter alongside "direction", it appears that e is perceived as a regular parameter.

I appreciate any help!

document.getElementById('voteButtonNoID').addEventListener('click', voteNoClick(direction));

function voteNoClick(direction) {
       // Here is where I intend to insert e.preventDefault()
        document.getElementById("voteMessageID").innerHTML = "Waiting for the votes to be tallied...";
        voteResults('no',direction);

javascript addeventlistener

Answer 1

Answer №1

Hey there, give this a shot

document.getElementById('voteButtonNoID').addEventListener('click', (e) => castNoVote(e, dir));

function castNoVote(e, dir) {
 e.preventDefault();
 document.getElementById("voteMessageID").innerHTML = "Awaiting the final vote count...";
 tallyVotes('no', dir);
}

Answer 2

Hey there, give this a shot

document.getElementById('voteButtonNoID').addEventListener('click', (e) => castNoVote(e, dir));

function castNoVote(e, dir) {
 e.preventDefault();
 document.getElementById("voteMessageID").innerHTML = "Awaiting the final vote count...";
 tallyVotes('no', dir);
}

Answer 3

Answer №2

Inside this function, you can include another function that allows for access to the event.

function clickNoVote(direction) {
    return function(event){
    // Add your code here ...
        event.preventDefault()
        document.getElementById("voteMessageID").innerHTML = "Please wait while the votes are counted...";
        tabulateVotes('no', direction);
    }
}

Answer 4

Inside this function, you can include another function that allows for access to the event.

function clickNoVote(direction) {
    return function(event){
    // Add your code here ...
        event.preventDefault()
        document.getElementById("voteMessageID").innerHTML = "Please wait while the votes are counted...";
        tabulateVotes('no', direction);
    }
}

Using the named function and function parameter to call `preventDefault()` and avoid the default

Answer №1

Answer №2

Similar questions

Angular: Cleaning an image tag in sanitized HTML text

"Experience the latest version of DreamFactory - 2.0.4

Transmitting JSON data containing nested objects through AngularJS

Generating an image in Fabric.js on a Node server following the retrieval of canvas data from a JSON

Comparing the positions of elements in Selenium WebDriver with PHP

Is the RouterModule exclusively necessary for route declarations?

Obtain the popup URL following a fresh request using JavaScript with Playwright

A guide to creating an HTTPS request using node.js

Adjusting package.json settings for an npm module

Guide on transferring JSON information from a client to a node.js server

Having difficulty implementing dynamic contentEditable for inline editing in Angular 2+

What is the best way to activate a component within Angular 2 that triggers the display of another component through method invocation?

How can I tally the frequency of characters in a given string using Javascript and output them as numerical values?

Using the JavaScript JSX syntax, apply the map function to the result of a

Leverage webpack to consolidate multiple ES6 classes into a single file for easy importing via a script tag

Deciphering a JSON response obtained from a jQuery output within a PHP context

Altering the dimensions of a <div> based on the retrieved data

The format of the date cannot be modified when using DesktopDatePicker as a React Component

Updating databases with the click of a checkbox

Automatically press the button when the display style is set to block