Parameterized function call on click event

There is a function defined as follows:

menu[0].onclick = function() {
    filters.reset_all();
    clients.get();
}

This function gets called when the user clicks on the first menu element. Now, I need to invoke this function from another place and here's what I have done:

    if (li.onclick) { // li and menu[0] refer to the same element
        li.onclick.call();
    }

It works perfectly fine.

However, now I want to pass some parameters to the onclick function. I tried using .call(some_param); but the arguments array in the onclick function remains empty.

What am I missing?

edit: I made the following change:

menu[0].onclick = function(arg) {
    console.log(arg);
    filters.reset_all();
    clients.get();
}

and also

li.onclick.call(li, param);

but still no success.

Answer №1

When using .apply(), the initial argument serves as the this reference. The subsequent parameters are then passed to the function itself. If there is no need to explicitly specify the this context, you can directly call the function such as li.onclick().

In general, event handlers are invoked by the system and are supplied with the event object as the primary parameter. To accommodate functions that require varied arguments, it's advisable to create a separate function rather than altering the event handler. The event handler may call this custom function if needed.

menu[0].onclick = function() {
    myCustomFunc("alpha");
}

function myCustomFunc(arg) {
    // perform actions here
    filters.reset_all();
    clients.get();
}

if (li.onclick) {
    myCustomFunc("beta");
}

Answer №2

It is recommended to use the following syntax:

call(object, param1, param2, param3...);

If you are working on your specific scenario, you should write:

li.onclick.call(li, param1);

Answer №3

When using the call() method, the first parameter represents the context (referred to as this), while all subsequent parameters are placed into an arguments array in sequential order. On the other hand, if you opt for the apply() method instead of call(), you only need to provide two parameters: apply(this, arguments_array)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript code to activate a text box when a checkbox is clicked

I have a dynamic table that is generated by JavaScript based on the selected item from a dropdown list. The table consists of a column for checkboxes, a column for displaying names, and a column for inputting quantities. I would like to have all textboxes ...

Guide on Adding a Map to a List in JavaScript

Currently, I am trying to extract data from a form and add it as a map to my list. However, an error message is displayed: Cannot read property 'url' of undefined express = require("express"); app = express(); var bodyParser = require("body- ...

Map Loader for GeoJson Leaflet Integration

Although my English skills are not perfect, I will do my best to explain my issue. I have some knowledge of javascript / html / ajax and I have created a webgis using Leaflet. The problem arises when loading a large geojson file onto the map - it takes qui ...

Error in react-native while attempting to find the lowest common ancestor of `responderInst` and `targetInst` using `Event

After upgrading my react-native app to version 0.44, I encountered an issue where the app would start up without any problems in both the simulator and on a mobile device. However, when I tried pressing a component like a button or widget, a red error scre ...

Alert: The lack of boundary in the multipart/form-data POST data has been detected in an unknown source on line

I am currently developing a file uploader that uploads an image when the input changes. Here is the code for my HTML form: <form method="post" enctype="multipart/form-data"> <input name="uploaded[]" type="file" id="file_upload"/> </for ...

Is there a way to efficiently parse and categorize erroneous JSON data in JavaScript?

Resolved my issue var allKeys = ["key","en","ar"]; for(var i=0;i<allKeys.length;i++) { for(j=0;j<jsonText.Sheet1.length;j++) { console.log(allKeys[i] + ' - ' + jsonText.Sheet1[j][allKeys[i]]); } } Live demonstration Appreciation ...

I tried utilizing the wrapper feature, but unfortunately, the modal did

import React, { PropTypes } from 'react'; import Dialog from 'material-ui/Dialog'; export default class CustomModal extends React.Component { constructor(props){ super(props) } handlePrimaryButton = () => { this.prop ...

Creating extensive pianoroll visualization using HTML and JavaScript

Currently, I am focusing on developing an HTML5 audio application utilizing the latest Web Audio API, and I require a "pianoroll" feature. This is essentially a keyboard grid where users can draw notes, similar to what is seen in many music production soft ...

Exploring the possibilities of utilizing classes in testing scenarios with Vue, Cypress, and Cucumber

I am currently working on setting up e2e tests using Cypress and Cucumber for my project. The application is built with Vue CLI 4.1.1, and I have added the package cypress-cucumber-preprocessor (V1.19.0) via NPM. Update: After extensive research and tes ...

JQuery Ajax encounters a 500 error message due to an internal server issue

I'm currently using the jQuery library to send an ajax request to a PHP file. Initially, everything was working perfectly fine with a relative path like this: url:"fetch_term_grades.php", However, when I modified the path to be more specific like th ...

Dynamically assigning column values based on object properties

I am currently utilizing the Ionic Framework along with its grid system that is reminiscent of Bootstrap. However, I believe my query leans more towards AngularJS than specific Ionic components. Here is what I have: <ion-col *ngFor="let col of row ...

Issue with scrolling functionality on dynamically inserted items in jQuery mobile list

I have encountered an issue where the scrolling on my page is not working properly after dynamically adding jQuery mobile list items using jQuery ajax response object. The function responsible for handling AJAX success looks like this: success: function( ...

Underscore performs calculations and outputs a fresh object as a result

Here is an example of a time series: [ { "_id": { "action": "click", "date": "2015-02-02T00:00:00+01:00" }, "total": 5 }, { "_id": { "action": "hit", "date": "2015 ...

Can we utilize the elements in Array<keyof T> as keys in T?

Hello, I am trying to develop a function that accepts two parameters: an array of objects "T[]" and an array of fields of type T. However, I am encountering an issue when I reach the line where I invoke el[col] Argument of type 'T[keyof T]' i ...

What is the Proper Way to Add Inline Comments in JSX Code?

Currently, I am in the process of learning React and I have been experimenting with adding inline comments within JSX. However, when I try to use the regular JavaScript // comments, it leads to a syntax error. Let me share a snippet of my code below: const ...

Updating parent data when new data is added in child component in React

I'm just starting to learn React and I've been reading a lot about updating children components when the parent component is updated, but I haven't come across much information about the opposite scenario. Currently, I have a parent compone ...

The AngularJS array data is not displaying correctly

I am having trouble displaying comments array data in HTML properly. The data appears the same as it is in the comments array. What could be causing this issue? How should I proceed? <ul class="media-list" ng-controller="dishDetailController as menuCt ...

display elements in indexed alphabetical order

Is it possible to format the $index output in alphabetical order instead of numerical? <div ng-repeat="name in names">{{$index}}</div> I am wondering if this can be achieved. ...

Organizing textual maps within a 2D array for rendering on an HTML5 Canvas

In my spare time, I am working on creating an HTML5 RPG game. The map is implemented using a <canvas> element with specific dimensions (512px width, 352px height | 16 tiles across, 11 tiles from top to bottom), and I'm wondering if there's ...

Display an error message when the button is clicked and the input field is left empty in a Vue 3 script setup

Hello, I am currently exploring Vue 3 and embarking on a new Vue 3 project venture. However, I seem to be encountering a challenge when it comes to displaying an error message if the button is clicked while the input field remains empty in my Vue 3 script ...