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

jQuery Does Not Iterate Through Arrays

What is the best way to choose all elements that fall between two specific elements?

Dynamic animations with RaphaelJS - Creating animated connections

What steps do I need to take to create npm packages specifically for react-native development?

Is there a way to link code and unit testing directly to npm test?

Error encountered: jQuery AJAX JSON request failed to be caught

Finding the source of the err.kind expression in the MERN stack: Unraveling the mystery

"Enhance search functionality by integrating live search results with clickable hyperlinks

Please insert a decimal point and thousand separator into the text field

What distinguishes defining a function through a prototype versus as a class property?

Comparing Optimistic Updates and Tag Invalidation in RTK Query

Tips on displaying the appropriate object value in a text field based on the selection from a dropdown menu

Unlocking the Secrets: Expert Methods to Obtain Assets through HttpClient in Angular

What is the best way to set the keyframes CSS value for an element to 0%?

Error message displaying "Invalid ID attribute in HTML 5 input"

Implementing the loading of a Struts 2 action with jquery in javascript

What is the best way to display two tables side by side in a Vue component?

What steps are involved in a server utilizing Next.js to create a complete document for transmission to the client?

Unable to locate item by its identification number

Creating a column for dates using the js-xlsx library