Question

I am making an web app in which I am creating rows dynamically and adding click listener to each dynamically added row. But I could not figure out how to get the rows index and to pass some variable to the listener.

for(var i=0; i<len; i++)  {      
    var TABLE = document.getElementById('tableId');
    var BODY = TABLE.getElementsByTagName('tbody')[0];

    //making a row
    var TR = document.createElement('tr');
    TR.className = "section group";

    //creating first column
    var TD = document.createElement('td');
    TD.className = "col span_1_of_3";

    //adding click listener
    url_array[count] = result.details[count].video_url;
    TR.addEventListener('click', function(e) {
        console.log(count,e);  //     ---------> 1 
    });

    count++;
}

In line indicated ---> 1, I have a global variable count initialized to zero and its value is last row index.

Answer 1

This is a scoping issue. When the click handler fires, then count is set to the last one. Try wraping your .addEventListener method with an anonymous function:

(function(count){
    TR.addEventListener('click', function(e) {
        console.log(count,e);  //     ---------> 1 
    });
})(count);

This will work, because functions create seperate scope unlike for loop.