retrieving object attributes within a loop-contained function

Question

retrieving object attributes within a loop-contained function

I've been working on adding a click event to a specific div that I created. While I was successful in doing so, the problem arises when I click on it and it displays undefined.

Below is the code snippet:

The variable 'resulta' is declared as a global array with objects


for(s = 0; s < resulta.length; s++) {
    y = document.createElement('div');
    y.setAttribute('class', 'eachssd');
    var x = document.createTextNode(resulta[s].name);
    y.appendChild(x);
    o.appendChild(y);
    y.addEventListener('click', function bnmhv() {location.href=resulta[s].datasrc}, false);
}

Thank you in advance for any help!

javascript object

Answer 1

Answer №1

Each time the for loop runs, all the event listeners that are created refer to the same s variable. This means that after each iteration, the value of resulta.length is assigned to s, resulting in resulta[s] being undefined. In order to fix this issue, you need to create a new scope for each of your event handlers by enclosing them in a closure. This way, each handler can access the correct value from

resulta[<current iteration's s value>]

.

Here is an example:

for(var s = 0; s < resulta.length; s++)
{
    (function (data) {
        var y = document.createElement('div')
        y.setAttribute('class', 'eachssd');
        var x = document.createTextNode(resulta[s].name)
        y.appendChild(x);
        o.appendChild(y)

        y.addEventListener('click', function () { location.href = data.datasrc }, false);
    }(resulta[s]));
}

During each iteration, an anonymous function is created and immediately invoked with the argument being

resulta[<current iteration's s value>]

, which is stored in the data parameter. When a user clicks on one of the created div elements, the click handler will reference data from its lexical scope.

For more information, check out these resources:

Closures and lexical scope

Answer 2

Each time the for loop runs, all the event listeners that are created refer to the same s variable. This means that after each iteration, the value of resulta.length is assigned to s, resulting in resulta[s] being undefined. In order to fix this issue, you need to create a new scope for each of your event handlers by enclosing them in a closure. This way, each handler can access the correct value from

resulta[<current iteration's s value>]

.

Here is an example:

for(var s = 0; s < resulta.length; s++)
{
    (function (data) {
        var y = document.createElement('div')
        y.setAttribute('class', 'eachssd');
        var x = document.createTextNode(resulta[s].name)
        y.appendChild(x);
        o.appendChild(y)

        y.addEventListener('click', function () { location.href = data.datasrc }, false);
    }(resulta[s]));
}

During each iteration, an anonymous function is created and immediately invoked with the argument being

resulta[<current iteration's s value>]

, which is stored in the data parameter. When a user clicks on one of the created div elements, the click handler will reference data from its lexical scope.

For more information, check out these resources:

Closures and lexical scope

retrieving object attributes within a loop-contained function

Answer №1

For more information, check out these resources:

Similar questions

Retrieve a variety of items and pass them to a view using the mssql module in Node

The dynamic concatenation of Tailwind classes is failing to have any effect, even though the full class name is being

Tips for eliminating unnecessary module js calls in Angular 9

Exploring the variable scope in Node.js with a focus on separating routes

Automatically scroll the element both up and down

What is the best way to split an input field into distinct fields for display on the screen?

Implementing Object.somefunction() in ngFor with Angular

What is the best way to deliver data from the main Vue instance to components that are being utilized by vue-router?

Keeping the header fixed on a sticky div (tocbot)

The canvas element automatically removes itself after being resized within an HTML5/JavaScript environment

Is there a way to retrieve the filename of a file uploaded using a shiny fileInput function?

The functionality of jQuery's appendTo method seems to be malfunctioning

Encountering a tsx-loader issue when integrating tsx with vuejs

When a specific JavaScript function is triggered, the value of an HTML control will reset to its original default value

In Vue JS, ensure that each item is loaded only after the previous item has finished loading

Mishandling of string interpretation

Converting an Object into an Array of Objects

Here's a unique version: "Steps for replacing an outdated chart with a new one using Chart.js and

Display the output of JSON.stringify in a neatly formatted table

creating a Vuejs button function that will add together two given numbers