Using a pre-defined function as a parameter will not function properly with the event listener

As a beginner, I recently attempted the following:

ul.addEventListener("click", function(e) {
  console.log("Hi");
});

Surprisingly, this code worked just fine. I learned that the function used here is anonymous. However, when I tried to define the function separately and then pass it in, it resulted in an error:

function myFunc(e) {
  console.log("Hi from myFunc");
}

ul.addEventListener("click", myFunc(e));

I'm confused about why this doesn't work. The error message indicates:

Uncaught ReferenceError: e is not defined
at javascript.js:29

Answer №1

Ensure to pass the reference of the function, not the outcome of its execution. This way, your function will be triggered when the click event occurs. It is similar to passing an anonymous function, as in both cases you are only passing the function's reference.

function myFunction(e) {
  console.log("Greetings from myFunction");
}

list.addEventListener("click", myFunction);

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

What is the process for uploading a JSON file from your local drive?

I am attempting to use jQuery to load a local JSON file. The code seems to be functioning properly, but for some reason, the data is not being made available in an array. $.getJSON("/ajax/data/myjasonfile.json", function(json) { console.log(js ...

Utilizing PHP and jQuery Ajax in conjunction with infinite scroll functionality to enhance filtering capabilities

I have implemented infinite-ajax-scroll in my PHP Laravel project. This project displays a long list of divs and instead of using pagination, I opted to show all results on the same page by allowing users to scroll down. The filtering functionality works s ...

Migration processes encountering delays due to running nodes

When running migrations in Node, I am encountering a timeout error. The specific error message is: Error: Timeout of 2000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves. Here is the ...

Using NodeJS and ExpressJS to send the HTTP request response back to the client

After creating a website using Angular 2 and setting up node.js as the backend, I successfully established communication between the Angular client and the node.js server. From there, I managed to forward requests to another application via HTTP. My curren ...

The issue with history.push() functionality not functioning as expected within Firebase's authentication system when used in conjunction

I'm currently working on setting up authentication using React, Firebase Auth, and Context API. signin.js import React, { useEffect, useState } from 'react'; import { Form, Button, Container, Card } from 'react-bootstrap'; import ...

React component that renders conditionally based on the response of an API request

I am working on a status icon that changes based on the number of errors in an object. What is the most effective method for passing data from ComponentDidMount to the function where I want to analyze it? I am trying to aggregate the status in an object, ...

Is there a possible method to obtain a smartphone number from a website?

Seeking a solution to retrieve the phone number of a device using HTML 5, JavaScript, or similar technology. Recently, I successfully obtained the coordinates of the device by incorporating the following JavaScript code: <!DOCTYPE html> <html> ...

You cannot make a hook call within the body of a function component, unless you are using useNavigate and useEffect in conjunction with axios interceptors

Currently, I am delving into React and attempting to include a Bearer token for private API calls. My approach involves writing a private axios function to intercept requests and responses. Subsequently, I invoke it in my API.js file to fetch data from the ...

Removing a CSS class using JQuery

Within my website layout, I have a div that is dynamically included using PHP. This div is inserted in two different locations, each inside its own parent div. <div id="parent_div"> <div id="contact_details_div" class="contact_details_div sam ...

Including a hyperlink in VUE Bootstrap for seamless user navigation

Why does this always drive me crazy? I'm determined to include an external link () and an image(enter image description here) on my portfolio page within the title of the project. main.js { id: 18, url: 'single-portfolio. ...

Is it possible to enable autocomplete for JavaScript generated code in .proto files?

I recently created a basic .proto file with the following content: syntax = "proto3"; message Event { optional string name = 1; } After downloading and installing the protoc linux compiler (protoc-3.19.3-linux-x86_64.zip) on my local machine, ...

Show off a font-awesome icon overlapping another image

My task involves fetching image source from a JSON file and then displaying it on an HTML page. https://i.sstatic.net/coOaU.png I also need to overlay a Font Awesome icon on top of the image as shown below: https://i.sstatic.net/nbrLk.png https://i.sst ...

Unable to load CSS background image

As I develop a website for a fictional company to enhance my skills in HTML, CSS, and JavaScript, I am encountering an issue with loading my background image. If someone could review my code to identify the problem, I would greatly appreciate it. Check ou ...

Is it feasible to determine the specific memory address of an Object in a program?

Is it possible in JavaScript to determine the memory location and memory usage of an object? Any assistance on this matter would be greatly appreciated. ...

Tips for preventing page breaks (when printing or saving as a PDF) in lengthy HTML tables

Here is the link to a single HTML file (including style and scripts): FQ.html The problem I'm facing can be seen in this image: https://i.sstatic.net/Nr4BZ.png I've tried several solutions, the latest of which involves the following CSS... @me ...

Is it typical to experience a forced reflow violation and page offset?

After implementing a position: fixed on-scroll feature for my navbar, I noticed an error being thrown by the DOM stating: [Violation] Forced reflow while executing JavaScript took ms during every scroll event. It seems that this could be caused by layout t ...

Unable to establish a connection with the TCP server on CloudFoundry, although the localhost node.js is functioning properly

I am experiencing difficulty connecting to my TCP server example that is running on CloudFoundry. Interestingly, when I run my app.js file on a local node.js installation, everything works perfectly. Upon using vmc push to deploy on CloudFoundry, the servi ...

PHP working with Ajax, receiving a status of 200 but still showing a readyState of 0

Snippet: function handleXMLHttpRequest() { var xhr; try { xhr = new XMLHttpRequest(); } catch (e) { try { alert("Error occurred"); xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ x ...

Persist in the face of a mishap in javascript

Two scripts are present on the page. If the first script encounters an error, the second script will not function properly as a result. Is there a way to make the second script ignore any errors from the first one and still work? Please note that I am str ...

Where will the user's input be stored?

Consider the following HTML code: <div class="form-group"> <label class="col-md-3 col-xs-3 col-sm-3 control-label">Phone</label> <div class="col-md-4 col-xs-4 col-sm-4"> <input id="input ...