How to attach onclick event for a JavaScript generated textbox?

Question

I have a table row which contains a textbox and it has an onclick which displays a JavaScript calendar... I am adding rows to the table with textbox, but I don't know how to attach onclick event to the JavaScript generated textbox...

<input  class="date_size_enquiry" type="text" autocomplete="off"
onclick="displayDatePicker('attendanceDateadd1');" size="21" readonly="readonly"    
maxlength="11" size="11"  name="attendanceDateadd1" id="attendanceDateadd1" 
value="" onblur="per_date()" onchange="fnloadHoliday(this.value);">

And my JavaScript generates a textbox,

    var cell2 = row.insertCell(1);
    cell2.setAttribute('align','center')
    var el = document.createElement('input');
    el.className = "date_size_enquiry";
    el.type = 'text';
    el.name = 'attendanceDateadd' + iteration;
    el.id = 'attendanceDateadd' + iteration;
    el.onClick = //How to call the function displayDatePicker('attendanceDateadd1');
    e1.onblur=??
    e1.onchange=??
    cell2.appendChild(el);

Answer 1

Like this:

var el = document.createElement('input');
...
el.onclick = function() {
    displayDatePicker('attendanceDateadd1');
};

BTW: Be careful with case sensitivity in the DOM. It's "onclick" , not "onClick" .

Answer 2

Taking your example, I think you want to do this:

el.onclick = function() { displayDatePicker(el.id); };

The only trick is to realise why you need to wrap your displayDatePicker call in the function() { ... } code. Basically, you need to assign a function to the onclick property, however in order to do this you can't just do el.onclick = displayDatePicker(el.id) since this would tell javascript to execute the displayDatePicker function and assign the result to the onclick handler rather than assigning the function call itself. So to get around this you create an anonymous function that in turn calls your displayDatePicker . Hope that helps.

Answer 3

el.onclick = function(){
  displayDatePicker(this.id);
};

Answer 4

HTML5/ES6 approach:

var el = document.createElement('input')

[...]

el.addEventListener('click', function () {
  displayDatePicker('attendanceDateadd1')
})