addEventListener in for loop adds always to last item

Question

I'm currently writing a chrome extension, so don't mind the "chrome.*" code.

Right now, I'm facing a problem and I have no idea how to solve this (tried everything I could find on google)..

This is my function:

function tabwlwatchlist() {  
document.getElementById('watchlisttable').innerHTML = "";
chrome.storage.local.get('movienames', function (resultnames) {
    chrome.storage.local.get('movielinks', function (resultlinks) {
        for (var j=0; j<resultnames.movienames.length; j++) {
            (function () {
            document.getElementById('watchlisttable').innerHTML += '<tr><td><h3 class="article_preview"><a href="' + resultlinks.movielinks[j] + '" target="_blank"><span>' + resultnames.movienames[j] + '</span></a></h3></td><td><h3 class="article_preview"><span id="wlt' + j +'">entfernen</span></h3></td></tr>'; 
            console.log("test");
            document.getElementById('wlt' + j).addEventListener("click", function(){
                alert('works');
            }, false);
            console.log("test2");
        }())
        }
    });
});
document.getElementById('lasthd').style.display = "none";
document.getElementById('lastserien').style.display = "none";
document.getElementById('watchlisttab').style.display = "block";
}

The EventListener always adds to the last Element of the for loop.

Any ideas? :/

JavaScript closure inside loops – simple practical example: http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example — sanchez, Jan 11 '15 at 00:54
Using *innerHTML* to modify table elements will fail in most (all?) versions of IE, see [*MSDN*](http://msdn.microsoft.com/en-us/library/ie/ms533897(v=vs.85).aspx). — RobG, Jan 11 '15 at 01:11

AL-zami · Answer 1 · 2015-01-11T01:06:16.017

your j value has became the height number after the for loop is executed....to solve it you have to know a common javascript phenomenon called closure.To prevent this you have to provide the argument j to the immediately invoked function.You can learn more about them enter link description here

function tabwlwatchlist() {  
document.getElementById('watchlisttable').innerHTML = "";
chrome.storage.local.get('movienames', function (resultnames) {
    chrome.storage.local.get('movielinks', function (resultlinks) {
        for (var j=0; j<resultnames.movienames.length; j++) {
            (function (j) {
            document.getElementById('watchlisttable').innerHTML += '<tr><td><h3 class="article_preview"><a href="' + resultlinks.movielinks[j] + '" target="_blank"><span>' + resultnames.movienames[j] + '</span></a></h3></td><td><h3 class="article_preview"><span id="wlt' + j +'">entfernen</span></h3></td></tr>'; 
            console.log("test");
            document.getElementById('wlt' + j).addEventListener("click", function(){
                alert('works');
            }, false);
            console.log("test2");
        }(j))
        }
    });
});
document.getElementById('lasthd').style.display = "none";
document.getElementById('lastserien').style.display = "none";
document.getElementById('watchlisttab').style.display = "block";
}

thanks, i already managed it by adding a second for loop because the "innerHTML" always overwrote my EventListener ;) — Zazama, Jan 11 '15 at 01:04

addEventListener in for loop adds always to last item

1 Answers1