passing value to a dynamic created function in javascript

Question

I am having some problems while creating a dynamic webpage in javascript.

My idea is to read a list of events and people signed up on them. I create a page with all events (each event is a button) and clicking on one of them, see the list of users.

This works fine. But now, I am adding a button to export some of these users to an excel file. And I want to add a button with an onClick function like this:

...onclick=functionÇ(id_Event, numberOfUsers, listOfUsers)...

Inside of the html code generated by javascript. I found some problems also doing like this so I changed so:

var td = document.createElement("td");
var input = document.createElement("input");
input.setAttribute("type","button");
input.setAttribute("value","Exportar a Excel CSV");
input.onclick = function() {
    saveExcelFunctionControl(arrayNumberUsersInEvents[i], response);
};

td.appendChild(input);
document.getElementById("added"+element[i].id_Event).appendChild(td);

I created a global array called arrayNumberUSersInEvents in which I am adding in each possition, people subscribed. i, is the id counter for each position.

But even this, I am getting an undefined while reading the value of the firsdt parameter. I think it is a problem of dynamic data, I am not executing the function I want to each time I click the button. Do you know how to do something like this?

To sum up: My problem is that I want to pass some arguments to a function in a dynamic created page. I don't know how to pass the data and read the correct parameters inside.

I added my code because one user asked for it:

for(i = 0; i < element.length; i++){
                                             $(".eventsControl").append(
                                        ''+
                                    ''+
                                    ''+
                                    '' + element[i].name + ''+
                                    '' + "Desc:  " + element[i].description +''+
                                    ''+
                                    ''
                                ).listview('refresh');
                         //console.log(response);

                            //BUCLE for setting all users in each event. Better use some string and after, join all of them
                                header = '  ' +
                                 ' Lista de Asistencia ' + 
                                 ' '+
                                 '  ' + 
                                 ' ' +
                                 ' ';

                                 //header = header + '
';

                                eval('var numberUsers' +element[i].id_Event + "=1");
                                arrayNumberUsersInEvents[i] = 0; 
                                if(response.length>0){
                                    bucle = ' '+

                                            ' '+
                                            ' '+
                                            ' '+
                                            ' '+
                                            ' '+
                                            ' ';

                                    for(iData = 0; iData < response.length; iData++){
                                        if(element[i].id_Event == response[iData].id_Event){
                                            //console.log(response[iData].name);
                                                bucle = bucle + ''+
                                                ''+


                                                '';    

                                            eval('numberUsers' +element[i].id_Event + "++");
                                            arrayNumberUsersInEvents[i] = arrayNumberUsersInEvents[i]+1;             
                                        }
                                    }
                                    //header = header + '
';
                                    //header = header + '
';
                                    bucle = bucle + 'Nombre Primer apellido Segundo apellido NIF Asistencia
'+ eval('numberUsers' +element[i].id_Event) +' '+ response[iData].name +' '+ 
                                                response[iData].surname1 +' '+ 
                                                response[iData].surname2 +' '+ 
                                                response[iData].NIF + '  '+
                                                    '  '+
                                                '';
                                    $("#controlList").after(header + bucle + '');


var td = document.createElement("td");
var input = document.createElement("input");
input.setAttribute("type","button");
input.setAttribute("value","Exportar a Excel CSV");
input.onclick = function() {
    saveExcelFunctionControl(arrayNumberUsersInEvents[i], response);
};

td.appendChild(input);
document.getElementById("added"+element[i].id_Event).appendChild(td);


                                }


                }

                },
       error: function(xhr, status, message) { alert("Status: " + status + "
ControlGetEventsRegister: " + message); }
    });

ndpu · Accepted Answer

You can use closure to pass parameters to dynamically created onclick handler:

input.onclick = (function() {
    var arr = arrayNumberUsersInEvents[i];
    var resp = response;
    return function() {
        saveExcelFunctionControl(arr, resp);
    }
})();

How do JavaScript closures work?

passing value to a dynamic created function in javascript

Answers (2)

Related Questions