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;
}
Tausif
July 17, 2006 at 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);
}
chovy
July 18, 2006 at 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.
Heucuva
August 19, 2006 at 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.
ugur
August 20, 2006 at 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 ?
Lin
August 24, 2006 at 10:04 am
you can use
element.onclick = function() {your_func_with_param(params)}
HIP
Chris S
October 10, 2006 at 6:44 am
This works fine in IE but fails in Mozilla (Firefox). Any ideas?
Chris S
October 10, 2006 at 7:39 am
Ignore previous comment, it was something else failing.
Dominic
October 13, 2006 at 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!
Pat Welborn
October 13, 2006 at 9:21 pm
Thanks for this illuminating bit of Javascript. This just saved HOURS of lost time.
i
November 12, 2006 at 3:19 pm
Thaks :) that’s what i needed!
required
November 23, 2006 at 2:50 pm
I cannot thank you enough.
From; a newbie…
xshape
December 4, 2006 at 6:25 am
well done buddy!
THANKS ;)
That was what i needed too!
ilija
January 31, 2007 at 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?
chovy
January 31, 2007 at 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.
ilija
February 1, 2007 at 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”);
}
ilija
February 1, 2007 at 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.
ilija
February 1, 2007 at 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
Kashif
September 3, 2007 at 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
Shadow
September 15, 2007 at 5:00 am
I have diffrent problem.
var oForm = document.getElementById(‘my_form’);
for(var i=0; i
Basan
November 6, 2007 at 5:49 pm
About setting the onclick event on the fly (dynamically), YOU THA MAN! VERY NICE! CHEERS
chad
November 13, 2007 at 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.
jonyBgood
December 27, 2007 at 2:42 am
god bless you! saved my day!
wonder
January 4, 2008 at 1:01 pm
LIN, thank a lot, you save me a lot of time.
jalil
January 7, 2008 at 2:53 am
element.onclick = function() {click_ack();}
fails in IE6, work in FF.
any ideas please?
jalil
January 7, 2008 at 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.
David Xu
January 9, 2008 at 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
David Xu
January 9, 2008 at 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
Kishor
January 29, 2008 at 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?
CarolinaCool
February 10, 2008 at 12:34 pm
Thanks for the info!! It worked like a charm for setting the onclick attribute dynamically.
Lucio
March 7, 2008 at 2:35 am
Wonderful. Worked like a charm. Thanks.
ethan
April 20, 2008 at 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.
adam
May 10, 2008 at 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.
Des
July 22, 2008 at 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!
jobo
July 25, 2008 at 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?
Steve
July 30, 2008 at 2:39 am
Thanks a lot.
element.onclick = function() {your_func_with_param(params)}
Works brilliantly. If only I had found this page first!!
Robi
August 8, 2008 at 2:27 pm
Thanks JOBO (380718)!
Your is the perfect solution! >>>
el.onclick = new Function(’upload(value)’);
jakeonfire
August 20, 2008 at 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?
Leigh
September 12, 2008 at 5:26 am
Cheers Adam (post 379882) – That was exactly what I needed to get it all working with parameters.
LiFZ
November 11, 2008 at 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.
Robert
November 11, 2008 at 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)”);
Robert
November 11, 2008 at 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).
Wayne
November 12, 2008 at 1:52 pm
Thanks, Lin. Have already spent hours trying to figure out a solution. You’ve saved me many more.
Shireesh
January 14, 2009 at 7:23 am
Thanks a lot for the solution……
sachin tiwari
February 10, 2009 at 5:18 pm
adam
Thanks, Thank you very much
Adrian
May 13, 2009 at 6:55 am
I add my ‘thank you’ too!
Harry Wang
May 18, 2009 at 11:36 pm
Another would be (passing a parameter with quotes):
element.onclick = new Function(”function(’”+parameter+”‘)”);
That works! Thanks a lot.
Farrukh Qadri
June 2, 2009 at 5:23 am
ADAM Solution rocks….! :)
Paulo
June 8, 2009 at 2:45 pm
Thanks man !!!
Michael
June 16, 2009 at 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.
marian
June 17, 2009 at 12:27 am
hi, is it possible to assign multiple functions for the onclick?