Javascript: Dynamically Change onclick Event

Sun, November 6, 2005 — Category: Development

Brief summary of how to properly add an event in javascript dynamically.

To dynamically change or add an “onclick” event handler to an element, try:


var el = document.getElementById('foo');
el.onclick = showPopup;
//NOTE: showPopup();
//or showPopup(param);
//will NOT work here.
//Must be a reference to a function,
//not a function call.

function showPopup() {
  var popup = window.open(this.href, "popup", "height=800,width=600");
  popup.focus();
  return false;
}

52 Comments »

6314

Comment by Tausif

July 17, 2006 @ 4:45 pm

If I have a method with a parameter then how will I dynamically bind it to the onclick event? Lets say my method is:

function showPopup(param)
{
alert(param);
}

6317

Comment by chovy

July 18, 2006 @ 10:48 am

it only works with a function reference, which means you\’re not actually calling it, so there\’s no reason to pass it a parameter.

You probably need a different solution, if you tell me what you\’re trying to do, maybe there is a better way.

Is it possible to grab the data you need without passing it as a parameter? Find out where that parameter actually gets defined, and then just read it from inside your function, rather than trying to pass it dynamically.

7746

Comment by Heucuva

August 19, 2006 @ 5:42 pm

You can call the following in order to change an onclick to actual script text:

node.attributes[”onclick”].value = “script_text_here()”;

Where “node” is the name of your document node that you want the onclick to be changed for. This works on all attributes like ondblclick and onmouseover, too.

7777

Comment by ugur

August 20, 2006 @ 6:30 am

Heucuva,
I tried your solution but I can only get the value of onclick event, but I can’t set the value of onclick event.
I mean when trigger,
node.attributes[”onclick”].value = “script_text_here()”;

my elements onclick event doesn’t change to “script_text_here()” and I get no errors.

does it make sense ?

8095

Comment by Lin

August 24, 2006 @ 10:04 am

you can use

element.onclick = function() {your_func_with_param(params)}

HIP

11414

Comment by Chris S

October 10, 2006 @ 6:44 am

This works fine in IE but fails in Mozilla (Firefox). Any ideas?

11419

Comment by Chris S

October 10, 2006 @ 7:39 am

Ignore previous comment, it was something else failing.

11775

Comment by Dominic

October 13, 2006 @ 12:42 pm

Thanks! Was searching all through google to find out why my onfocus function could run. ur article certainly saved me a LOT of time!

11945

Comment by Pat Welborn

October 13, 2006 @ 9:21 pm

Thanks for this illuminating bit of Javascript. This just saved HOURS of lost time.

15197

Comment by i

November 12, 2006 @ 3:19 pm

Thaks :) that’s what i needed!

16444

Comment by required

November 23, 2006 @ 2:50 pm

I cannot thank you enough.

From; a newbie…

17589

Comment by xshape

December 4, 2006 @ 6:25 am

well done buddy!
THANKS ;)
That was what i needed too!

19014

Comment by ilija

January 31, 2007 @ 8:22 am

Hi I have a different problem.
I want to assign onclick event to elements and I am getting a parametar from a XML file, but all of my parameters end up beeing the same as the las one!
for (var i=0;i any idea?

19021

Comment by chovy

January 31, 2007 @ 8:57 pm

you lost me there Ilija.

You’re getting a “parameter” from an XML file? not sure what you mean.

if you want to iterate over your xml elements, and apply an event handler to the elements, you need to loop over all the childNodes, and test for nodeType == 1 (el node type); then apply the event you want, otherwise continue in your loop.

19028

Comment by ilija

February 1, 2007 @ 3:59 am

Sorry not all of my code pasted ??

This is my problem: I have parameters in XML and I loop through them, and then my parameter is OK, but when I write it to my dovcument all list elements recieve the last parameter.
In a xml document I have two elements, first one the the parameter and second one the text.
code:
for (var i=0;xml.length++;i++)
{
var link = getNodeValue(xml[i], ‘link’);
var text = getNodeValue(pretraga[i],’text’);
vali=li[i] = document.createElement (”li”);
}

19029

Comment by ilija

February 1, 2007 @ 4:02 am

li[i] = document.createElement (”li”);
li[i].onclick function (sendRequest (”GET”, “index.php?p=” + link;
…

}
li is a list element which I append to some ul element.
All of my onclick event do the same.

19031

Comment by ilija

February 1, 2007 @ 7:04 am

Sorry, but I am not sure my comment was posted !?
This is my problem. Because I am in the loop when I send a parameter it always references the last one.
var link;
var x=…. an Array I get from XML
for (i=0;i

118132

Comment by Kashif

September 3, 2007 @ 12:09 am

I have tried the solution given above, actually my problem is that i have to increment row in a table having 3 textbox, and when this row is created i have to use ajax on onkeyup event to show that the data entered in these texboxes is valid or not, for this i took a div beside to every textbox to show if data is valid or not for this i call the function in which i use ajax work on onkeyup event. For this I have to pass parameters i.e. div id and and a counter dynamically to the function bcoz row is created dynamically on onclick event.
I hope u all got what i want…
thnx

133175

Comment by Shadow

September 15, 2007 @ 5:00 am

I have diffrent problem.

var oForm = document.getElementById(’my_form’);

for(var i=0; i

201053

Comment by Basan

November 6, 2007 @ 5:49 pm

About setting the onclick event on the fly (dynamically), YOU THA MAN! VERY NICE! CHEERS

209384

Comment by chad

November 13, 2007 @ 11:30 am

I’m having similar problems to ilija above. When you iterate over a loop and dynamically create elements with javascript, you may not know ahead of time what your values are going to be. Those values are stored in arrays, for example, and when you set someElement.onclick = function(){somefunction(myvar[i]); } myvar[i] is (I think) out of scope when the function is actually called. what you end up getting is the last value put into the myvar array for every call to somefunction.

256970

Comment by jonyBgood

December 27, 2007 @ 2:42 am

god bless you! saved my day!

266151

Comment by wonder

January 4, 2008 @ 1:01 pm

LIN, thank a lot, you save me a lot of time.

268374

Comment by jalil

January 7, 2008 @ 2:53 am

element.onclick = function() {click_ack();}

fails in IE6, work in FF.
any ideas please?

268381

Comment by jalil

January 7, 2008 @ 3:03 am

my apologies.

element.onclick = function() {click_ack();}

*does* work in both IE and FF. great !
( i put it in the wrong place initially ).

incidentally, FF works with this too…

element.setAttribute(’onClick’,'click_ack()’);

but not in IE.

interesting how an attribute can also carry an event, in a sense they are the same, so FF is correct.

thanks much.

270999

Comment by David Xu

January 9, 2008 @ 9:19 am

I want to set this dynamically
link

this doesn’t work, since event var is not found.
aa.onclick = function() {wrapContent(event, aa.href);}

this works for FF only
aa.setAttribute(”onClick”,”return wrapContent(event, this.href)”);

Please help

271000

Comment by David Xu

January 9, 2008 @ 9:22 am

I want to set this dynamically
onClick=”return wrapContent(event, this.href)” to links.

Following doesn’t work, since event var is not found.
aa.onclick = function() {wrapContent(event, aa.href);}

this works for FF only
aa.setAttribute(”onClick”,”return wrapContent(event, this.href)”);

Please help

292435

Comment by Kishor

January 29, 2008 @ 10:54 pm

Hi all,

I’m using oops concepts of javascript in which i’ve a class and some methods. I one method I’m creating few html elements (like DIV, IMG) for a particular object and now I want to assign some event (mouse) on image used. This is goining to be dynamically adding of events. Is it possible to have the normal function defined in the class method?
Any ideas?

309707

Comment by CarolinaCool

February 10, 2008 @ 12:34 pm

Thanks for the info!! It worked like a charm for setting the onclick attribute dynamically.

343534

Comment by Lucio

March 7, 2008 @ 2:35 am

Wonderful. Worked like a charm. Thanks.

379727

Comment by ethan

April 20, 2008 @ 11:52 am

Thank you!
I’ve been trying to make this work for hours

//NOTE: showPopup();
//or showPopup(param);
//will NOT work here.
//Must be a reference to a function,
//not a function call.

but I was missing this key bit of info.
You just made my day.
Thank you.

379882

Comment by adam

May 10, 2008 @ 6:04 pm

Hi All,

i have found a universal solution for this issue. check this: http://codingforums.com/archive/index.php?t-55356.html

the mean part is this:

One way would be (passing an object reference):
element.onclick = new Function(”function(this)”);

Another would be (passing a parameter with quotes):
element.onclick = new Function(”function(’”+parameter+”‘)”);

Passing a variable without quotes:
element.onclick = new Function(”function(”+parameter+”)”);

it works with FF, IE6 and IE7 as well.

380699

Comment by Des

July 22, 2008 @ 2:35 am

ADAM - Finally… I nearly gave up on this thread but I’m glad I made it to your post. This solution does what I am trying to do and what was originally asked for at the top of this thread!

380718

Comment by jobo

July 25, 2008 @ 10:58 pm

i have a problem similar to the first one. i cant pass parameters using onlick. it is dynamic and i cant find a way to pass the paramter. sameple code

—————————————————-
var cellThree = row.insertCell(2);
var el = document.createElement(’input’);
el.type = ‘button’;
el.size = 110;
el.name = ”
el.value = ‘Attachment’;
el.onclick = new Function(’upload(value)’);
cellThree.appendChild(el);
—————————————————
the function “function” cannot pass the value “value”. any idea?

and one more. pass parameter in window.open?
sample code.

—————————————————
function upload(count)
{
var name = “jobo”;

newwindow = window.open(’assembly/admin/uploadFile.jsp’,'NewWin’,'toolbar = no, width = 450, height = 180′)
}
—————————————————

want to pass the value name to the next jsp? any idea?

380742

Comment by Steve

July 30, 2008 @ 2:39 am

Thanks a lot.

element.onclick = function() {your_func_with_param(params)}

Works brilliantly. If only I had found this page first!!

380786

Comment by Robi

August 8, 2008 @ 2:27 pm

Thanks JOBO (380718)!

Your is the perfect solution! >>>
el.onclick = new Function(’upload(value)’);

380843

Comment by jakeonfire

August 20, 2008 @ 1:13 pm

Can someone tell me why the first button works and the second one doesn’t?

http://www.totaramusic.com/jake/jstest.html

<html> <head> <title>Job Manager tester</title> <script type="text/javascript"> onload = function() { document.getElementById('testButton').onClick = alertPop; } function alertPop() { alert("button clicked"); } </script> </head> <body> <form> <input id="testButton" type="button" value="Test Button" /> <input id="testButton2" type="button" value="Test Button 2" onclick="alertPop()" /> </form> </body> </html>

380844

Comment by jakeonfire

August 20, 2008 @ 1:19 pm

or rather, the other way around :o)

The first method would be elegant because the JS is completely isolated from the HTML. Using FireBug I can see that the onload function gets called… I just found my problem. “onclick” instead of “onClick”.

Anyway, yeah, any function assigned to onload gets called on page load, so you can attach functions to html elements without putting ANY references to JS IN the HTML. Pretty neat huh?

380901

Comment by Leigh

September 12, 2008 @ 5:26 am

Cheers Adam (post 379882) - That was exactly what I needed to get it all working with parameters.

381006

Comment by LiFZ

November 11, 2008 @ 12:43 pm

You cannot get it wrong using ADAM’s method. It uses the same scope for variables that you’re currently in, so all of your local variables will be able to be passes as parameters.

381007

Comment by Robert

November 11, 2008 @ 2:39 pm

I was researching this problem today, and I found TWO solutions that work:

element.onclick = function() {myFunc(params)}
element.onclick = new Function(”myFunc(params)”);

Note that in the first example, NOTHING is quoted. If you want to pass a variable parameter, you do it like this in each example:

var a = ‘foo’;
element.onclick = function() {myFunc(a)}
element.onclick = new Function(”myFunc(”+a+”)”);

So what’s the difference? I eventually found an answer to that question here:
http://www.permadi.com/tutorial/jsFunc/index.html

“Declaring a function with “new Function()” causes the function not to be compiled, and is potentially slower than the other ways of declaring functions.” Essentially, the second method creates a new Function object in RESPONSE to the click event, while the first method creates a new Function object at load time to HANDLE the click event.

As others noted in this thread, though, if your parameter is the keyword “this”, then you can’t use the first method because you don’t want the “this” that’s referred to in the current scope. In that example, it seems like the following two are probably equivalent (though I haven’t tested the notion):

element.onclick = function() {myFunc(element)}
element.onclick = new Function(”myFunc(this)”);

381009

Comment by Robert

November 11, 2008 @ 10:15 pm

FWIW, I tested that suggestion at the end of my last post (to pass “element” instead of “this”), and it doesn’t work either. I guess the “element” object goes out of scope between the time the function is created and the time it gets executed. So that means that the “function() {}” syntax is only really useful for functions that take static parameters (or none).

381016

Comment by Wayne

November 12, 2008 @ 1:52 pm

Thanks, Lin. Have already spent hours trying to figure out a solution. You’ve saved me many more.

381116

Comment by preeksapper

January 3, 2009 @ 9:19 pm

hello it is test. WinRAR provides the full RAR and ZIP file support, can decompress CAB, GZIP, ACE and other archive formats.
ttyawducxfetxpihzetcbnppmkjipjalfinhello

381124

Comment by Shireesh

January 14, 2009 @ 7:23 am

Thanks a lot for the solution……

381313

Comment by sachin tiwari

February 10, 2009 @ 5:18 pm

adam
Thanks, Thank you very much

381413

Comment by Adrian

May 13, 2009 @ 6:55 am

I add my ‘thank you’ too!

381419

Comment by Harry Wang

May 18, 2009 @ 11:36 pm

Another would be (passing a parameter with quotes):
element.onclick = new Function(”function(’”+parameter+”‘)”);

That works! Thanks a lot.

381432

Comment by Farrukh Qadri

June 2, 2009 @ 5:23 am

ADAM Solution rocks….! :)

381442

Comment by Paulo

June 8, 2009 @ 2:45 pm

Thanks man !!!

381464

Comment by Michael

June 16, 2009 @ 2:29 pm

Awesome. More than 3 years after the initial post this information is still helping people- including me! Thanks all for taking the time to post your solutions.