Add onclick event programmatically

Question

How do I add an onclick event to a tag in HTML programmatically?

I want to be able to click a link, and have an onclick event attached to a Javascript function take effect on another tag.

Here is what I have so far:

var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount); 
var cell1 = row.insertCell(0); 
var element1 = document.createElement("input");
element1.type = "text";
element1.id="List["+num+"].id";
element1.name="List["+num+"].id";
element1.onclick="javascript:CalCal()";
cell1.appendChild(element1);

I want to call a Javascript function CalCal() on onClick event. Is this possible?

tried using jQuery, your life will be much easier :D

Tzu ng
– Tzu ng

2012-11-05 09:34:43 +00:00
Commented Nov 5, 2012 at 9:34 — Tzu ng
– Tzu ng, Commented Nov 5, 2012 at 9:34

mike · Accepted Answer · 2012-11-05 09:37:16Z

34

But keep in mind that addEventListener is supported in IE just from version 9. To support older versions of IE you could use something like that:

if (element1.addEventListener) {  // all browsers except IE before version 9
  element1.addEventListener("click", CalCal, false);
} else {
  if (element1.attachEvent) {   // IE before version 9
    element1.attachEvent("click", CalCal);
  }
}

answered Nov 5, 2012 at 9:37

mike

8801 gold badge8 silver badges12 bronze badges

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

2 Comments

nidhi Over a year ago

i need to pass parameter also..how can i?

mike Over a year ago

in this case you have to replace CalCal inside addEventListener and attachEvent with an anonymous function like this: function() { CalCal(yourParameter); }

Eric Leschinski · Accepted Answer · 2014-01-05 00:53:39Z

16

Yes you can add an onclick event programmatically in javascript like this:

element1 = document.getElementById("your_tag_id");
element1.addEventListener("click", CalCal)

This attaches an onClick event to tags with id="your_tag_id".

You can also remove the onclick event like this:

element1.removeAttribute("click");

More at https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener

edited Jan 5, 2014 at 0:53

Eric Leschinski

155k96 gold badges423 silver badges337 bronze badges

answered Nov 5, 2012 at 9:30

Dan Dascalescu

154k66 gold badges336 silver badges422 bronze badges

1 Comment

Roxy'Pro Over a year ago

what is proper way of adding events to an HTML elements, programtically using javascript or directly on HTML element? I guess addEventListener() is often the better way to get notified of events, especially when wishing to apply various event handlers independently from each other on same element?

AbstractProblemFactory · Accepted Answer · 2012-11-05 09:32:54Z

3

Try

element1.onclick=CalCal;

instead:

element1.onclick="javascript:CalCal()";

answered Nov 5, 2012 at 9:32

AbstractProblemFactory

9,8518 gold badges54 silver badges67 bronze badges

2 Comments

fiacobelli Over a year ago

element1.onclick=function(){CalCal();} should be the correct syntax here.

AbstractProblemFactory Over a year ago

Nope, CalCal is just an function reference, u would do also function reference creating anonymous function(){}.

Collectives™ on Stack Overflow

Add onclick event programmatically

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related