How to connect OnClick event for created javascript text field?

Question

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

<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 text box,

  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. This "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 understand why you need to wrap your displayDatePicker call in function() { ... } code. Basically, you need to assign the function to the onclick property, however, you cannot just do el.onclick = displayDatePicker(el.id) , as this will tell javascript to execute the displayDatePicker function and assign the result to onclick , rather than assigning the function call itself. To get around this, you create an anonymous function, which in turn calls your displayDatePicker . Hope this helps.

Answer 3

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