Creating distinctive identifiers for individual function parameters in JavaScript using addEventListener

Question

Creating distinctive identifiers for individual function parameters in JavaScript using addEventListener

I am working on a for loop that dynamically generates elements within a div. Each element should trigger the same function, but with a unique ID.

for(var i = 0; i < 10; i++)
{
    var p = document.createElement("p");
    
    var t = document.createTextNode("asdf");
    p.appendChild(t);
    
    p.addEventListener("click", function(e){popup(e, i);}, false);
    
    document.getElementById("someDiv").appendChild(p);
}

Let's assume the function is:

function popup(e, id)
{
    //do stuff with the mouse event and get data according to the id
}

Therefore, I require the mouse event object to work properly.

Currently, every click results in the function being called with the same ID parameter (always sending 10 as the ID, although the mouse event functions correctly).

Any suggestions or insights would be highly appreciated!

javascript dom-events

Answer 1

Answer №1

The reason for the issue is that a closure is being created which holds onto the final value of i from the for loop. To resolve this, you should modify the following line:

p.addEventListener("click", function(e){popup(e, i);}, false);

To address this issue, start by defining a new function:

function generateFunc(i) {
    return function(e) {popup(e, i); }
}

Then update the line to:

p.addEventListener("click", generateFunc(i), false);

Refer to this post for further insights on this technique.

Answer 2

The reason for the issue is that a closure is being created which holds onto the final value of i from the for loop. To resolve this, you should modify the following line:

p.addEventListener("click", function(e){popup(e, i);}, false);

To address this issue, start by defining a new function:

function generateFunc(i) {
    return function(e) {popup(e, i); }
}

Then update the line to:

p.addEventListener("click", generateFunc(i), false);

Refer to this post for further insights on this technique.

Creating distinctive identifiers for individual function parameters in JavaScript using addEventListener

Answer №1

Similar questions

Angular 5 - Creating a dynamic function that generates a different dynamic function

The latest version of Material UI, v4, does not currently support React 18

Avoid revealing sensitive information by refraining from utilizing the Json decode() function

Sticky positioning is not maintaining its position at the top

How are the script name and script file connected in WordPress enqueuing?

What is the best way to handle returning a promise when outside of the scope?

Passing data from input to Angular's $scope (filter)

The proxy encountered a TypeError when the trap for the property 'set' returned a falsish value

Vue.js parent component sending new data: prop mutation detected

Retrieve information from an SQL database using user input in a Classic ASP form without the need to refresh the page

JavaScript: Locate the HTML Attribute that Matches an ID

Assign the "this" keyword of App.vue to the Vuex state

Step-by-step guide on making a post request to the Facebook Graph Api with Httparty in a Rails application

Error: The value property is undefined and cannot be read at the HTMLButtonElement

Having trouble with my Express.js logout route not redirecting, how can I troubleshoot and resolve it?

The ElementNotInteractableException was thrown because the element could not be accessed via the keyboard when trying to input text into the FirstName field on Facebook

Struggling with PHP variables and AJAX JavaScript

Determining the exact number of immediate descendants within a ul element, while disregarding any script elements

Alter a prototype method belonging to another module

A unique issue arises when custom geometry is registered in A-Frame but fails to render once added to a scene