save value from loop for event

Question

how could i save value from loop for event,

            for (var i = 0, len = features.length; i < len; i++) {
                    if (features[i].type == 'tower')

                    {
                        for (var j = 0; j < markers.length; j++) {
                            var lines = [];
                            lines.push(features[i].position);
                            lines.push(markers[j].position);

                            var connectionPath = new google.maps.Polyline({
                                path: lines,
                                geodesic: true,
                                strokeColor: '#12aab5',
                                strokeOpacity: 0.8,
                                strokeWeight: 3
                            });

                            connectionPaths.push(connectionPath);

                            connectionPath.setMap(map);
                            connectionPath.addListener('click', function() {
                                var elevator = new google.maps.ElevationService();
                                displayPathElevation(getPathVariableCode(connectionPath), elevator, map,  features[i], markers[j]);
                            });
                        }
                    }
                }

features[i], markers[j] are null.

probably because they are called after i and j are already irrelevant .

i looking to use features[i] and markers[j] on the click event .

how could i preform something like this?

Possible duplicate of [Javascript infamous Loop issue?](https://stackoverflow.com/questions/1451009/javascript-infamous-loop-issue) — Andreas, Dec 31 '18 at 14:53

score 1 · Answer 1 · edited Dec 31 '18 at 15:29

You can maybe write a higher order function to generate the call back function.

function generateCB(connectionPath, feature, marker) {
    return function() {
        var elevator = new google.maps.ElevationService();
        displayPathElevation(
            getPathVariableCode(connectionPath), 
            elevator, 
            map,  
            feature, 
            marker
        );
    });
};

Then call this function in the loop to generate callback.

connectionPath.addListener('click', generateCB(connectionPath, features[i], markers[j]));

Tom O. · Answer 2 · 2018-12-31T15:34:20.447

This is a general approach to adding event listeners within a for-loop. It's not too complex - immediately invoke a function that calls addEventListener on each iteration of the for-loop. This will keep your counter correct.

document.addEventListener('DOMContentLoaded', function() {
  var els = document.querySelectorAll('div');
  init(els);
});

function init(a) {
  var i;

  //Just a regular for-loop..
  for (i = 0; i < a.length; i++) {
    //Invoke the fn so the listener is set immediately
    (function(j) {
      a[j].addEventListener('click', function() {
        console.log(`You clicked div number ${j}`);
      });
    })(i);
  }
}

<div id="div-0">Div 0</div>
<div id="div-1">Div 1</div>
<div id="div-2">Div 2</div>
<div id="div-3">Div 3</div>
<div id="div-4">Div 4</div>

If you're writing ES6 code you should also look into using let instead of var for declaring your for-loop i variable due to it's scoping rules.

save value from loop for event

2 Answers2