How to send parameters to onclick function in javascript

Question

I need to pass row parameters to my onclick function.

this is my code:

function renderHostTableRowJob (dataTable) {
    for (var i in dataTable) {
        var notification = dataTable[i];
        var row = document.createElement("tr");
        var cell = document.createElement("td");
        cell.innerText = notification["Name"];
        row.appendChild(cell);
        var cell = document.createElement("td");
        cell.innerText = notification["State"];
        row.appendChild(cell);
        var cell = document.createElement("td");
        cell.innerText = (notification["NotificationReceived"] === true) ? "Received" : "Missing";
        row.appendChild(cell);
        row.onclick = function() {alert(notification["Name"]);};
        $("#" + notification["Client"] + "_TableJobDetails > #" + notification["Client"] + notification["HostFormated"] + "_TableBodyJobDetails")[0].appendChild(row);
    }
}

At the moment all my row.onclick = function() {alert(notification["Name"]);}; are returning the value for the last iteration in my loop...

QUESTION: How can I send my values to the click event on each iteration?

thanks

icktoofay · Accepted Answer · 2014-06-22 07:40:31Z

1

Capture notification as a parameter to an anonymous function. Since it looks like you’re using jQuery, you can use jQuery.each, which will simplify your iteration and as a side effect capture it:

$.each(dataTable, function(index, notification) {
    // ...
});

By the way, if you are using jQuery, you can write your code more concisely:

var row = $('<tr>').click(function() {
    alert(notification.Name);
});
$('<td>').text(notification.Name).appendTo(row);
$('<td>').text(notification.State).appendTo(row);
$('<td>').text(notification.NotificationReceived ? 'Received' : 'Missing').appendTo(row);
row.appendTo('#' + notification.Client + '_TableJobDetails > ' +
             '#' + notification.Client + notification.HostFormated + '_TableBodyJobDetails');

Further, if your IDs are unique (as they should be), you need not specify the whole hierarchy; just use

row.appendTo('#' + notification.Client + notification.HostFormated + '_TableBodyJobDetails');

Also, while it is a larger change in your code, consider using delegation with on.

edited Jun 22, 2014 at 7:40

answered Jun 22, 2014 at 7:35

icktoofay

130k23 gold badges261 silver badges239 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

masber Over a year ago

Hi @icktoofay thanks for your quick response, could you please give an example of how to capture notification as a paremeter. I know I am using jquery but I am also learning javascript. Thank you very much

icktoofay Over a year ago

@Manuel: I did; using $.each does it. If you wanted to do it without $.each, you can do it manually with an IIFE, e.g. !function(someVariable) { /* ... */ }(someVariable).

masber · Accepted Answer · 2014-06-22 12:00:25Z

0

I got it working with the code below:

row.onclick = (function() {
    var details = notification;
    return function() { 
        showModalJobDetails(details);
    }
})();

answered Jun 22, 2014 at 12:00

masber

3,0877 gold badges35 silver badges51 bronze badges

Collectives™ on Stack Overflow

How to send parameters to onclick function in javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related