Question

I want to add Rows to a Table that already exists and each row has a onclick attribute. The problem is that each row needs to call the function with another parameter. At The moment no matter in what row i click the function is called with the parameter of the last row in the table.

This is how i add the rows to the table :

table = document.getElementById('ProgramTable');
table.style.visibility = "visible";
tableBody = document.getElementById('ProgrammTableBody');
tablelength = jsonObj0.data.map.programs.length;
// Check if there is already a Table, if so
// remove the Table

if (tableexists) {
    removetable();
}

for ( var i = 0; i < tablelength; i++) {
    channel = jsonObj0.data.map.programs[i].programServiceName;
    frequency = jsonObj0.data.map.programs[i].programIdentifier;
    imagelink = "../image/image.jsp?context=tuner&identifier="
        + channel;
    var row = document.createElement("tr");
    row.setAttribute("id", i);

    row.onclick = function() {
        tuneProgram(frequency)
    };
    var channelCell = document.createElement("td");
    var imageCell = document.createElement("td");
    var imageElement = document.createElement("IMG");
    var frequencyCell = document.createElement("td");
    channel = document.createTextNode(channel);
    frequency = document.createTextNode(frequency);
    channelCell.appendChild(channel);
    frequencyCell.appendChild(frequency);
    imageElement.setAttribute("src", imagelink);
    imageElement.setAttribute("width", "40");
    imageElement.setAttribute("height", "40"); // TODO OnError
            // hinzufügen und evtl
            // Css Style für Texte
            // siehe Tabellencode
    imageCell.appendChild(imageElement);
    row.appendChild(channelCell);
    row.appendChild(frequencyCell);
    row.appendChild(imageCell);
    tableBody.appendChild(row);
    }

So the tune function should be called with the specific frequency parameter but it seems like he is overwriting the onclick parameter everytime so the last one is in there for every row. But why is that so? is he adding the onclick Attribute to every row in that table? I don’t get it.

Thanks for your help!

Answer 1

Replace

row.onclick = function() { 
    tuneProgram(frequency) 
};

with

row.onclick = (function(frequency) {return function() {tuneProgram(frequency);};})(frequency);

This “anchors” the value of frequency by creating a new closure for it.