Programmatically adding individual event listeners to multiple divs results in the same function appearing on all affected divs

Question

for (i = 0;i < cnt;i++) {
    var thumb=thumbnails[i];
    var id=thumb.id;
    thumb.addEventListener('click', function () {
        location.href="SomeWebPage.html?id=" + id;
    }, false);
}

The code above results in all thumbnails having the same last id assignment instead of individual thumbnail id assignments based on the individual div id 's. My expectation was that each thumbnail div would be assigned an event handler that referenced their specific id in the location.href url being defined. Instead, all of the event handlers have the same url that references just the last dev id .

Answer 1

Use let instead of var

let id=thumb.id;

var is global stuff, thats why only last value is remained in arrow functions memory