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;
}
VN:F [1.8.4_1055]
VN:F [1.8.4_1055]
Javascript: Dynamically Change onclick Event7.11081
- Submit this to Script & Style
- Share this on Blinklist
- Share this on del.icio.us
- Digg this!
- Post this on Diigo
- Share this on Reddit
- Buzz up!
- Stumble upon something good? Share it on StumbleUpon
- Share this on Technorati
- Share this on Mixx
- Post this to MySpace
- Submit this to DesignFloat
- Share this on Facebook
- Tweet This!
- Email this to a friend?
- Suggest this article to ToMuse
- Subscribe to the comments for this post?
- Share this on Linkedin
- Seed this on Newsvine
- Share this on Devmarks
- Add this to Google Bookmarks
- Add this to Mister Wong
- Add this to Izeby
- Share this on Tipd
- Share this on PFBuzz
- Share this on FriendFeed
- Mark this on BlogMarks
- Submit this to Twittley
- Share this on Fwisp
- Moo this on DesignMoo!
- Share this on BobrDobr
- Add this to Yandex.Bookmarks
- Add this to Memory.ru
- Add this to 100 bookmarks
- Add this to MyPlace
- Submit this to Hacker News
- Send this page to Print Friendly
- Bump this on DesignBump
- Add this to Ning
- Post this to Identica
- Save this to Xerpi
- Share this on Wikio
- Tip this to TechMeme
- Sphinn this on Sphinn
- Post this to Posterous
- Grind this! on Global Grind
- Ping this on Ping.fm
- Submit this to NUjij
- Submit this to eKudos
- Submit this to Netvouz
- Submit this to Netvibes
- Share this on Fleck
- Share this on Blogosphere News
- Blend this!
- Add this to Wykop!
- Engage with this article!
- Share this on Hyves
- Push this on Pusha
- Bookmarks this on Hatena Bookmarks
- Store this link on MyLinkVault
- Submit this to SlashDot
- Add to a lense on Squidoo
- Submit this story to Propeller
- Submit this to FAQpal
- Clip this to Evernote
- Submit this to Meneame
- Submit this to Bitacoras
- Submit this link to JumpTags
- Share this on Bebo
- Submit tip to N4G
- Submit this to Strands
- Promote this on Orkut
- Share this on Tumblr
- Add this to Stumpedia
- Post this to Current
- Blog this on Blogger
This entry was posted on Sunday, November 6th, 2005 at 8:23 pm and is filed under Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
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);
}
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.
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.
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 ?
you can use
element.onclick = function() {your_func_with_param(params)}
HIP
This works fine in IE but fails in Mozilla (Firefox). Any ideas?
Ignore previous comment, it was something else failing.
Thanks! Was searching all through google to find out why my onfocus function could run. ur article certainly saved me a LOT of time!
Thanks for this illuminating bit of Javascript. This just saved HOURS of lost time.
Thaks :) that’s what i needed!
I cannot thank you enough.
From; a newbie…
well done buddy!
THANKS ;)
That was what i needed too!
Hi I have a different problem.
UN:F [1.8.4_1055]
please wait...
Rating: 0.0/5 (0 votes cast)
UN:F [1.8.4_1055]
Rating: 0 (from 0 votes)
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?
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.
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”);
}
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.
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
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
I have diffrent problem.
var oForm = document.getElementById(‘my_form’);
for(var i=0; i
About setting the onclick event on the fly (dynamically), YOU THA MAN! VERY NICE! CHEERS
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.
god bless you! saved my day!
LIN, thank a lot, you save me a lot of time.
element.onclick = function() {click_ack();}
fails in IE6, work in FF.
any ideas please?
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.
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
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
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?
Thanks for the info!! It worked like a charm for setting the onclick attribute dynamically.
Wonderful. Worked like a charm. Thanks.
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.
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.
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!
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?
Thanks a lot.
element.onclick = function() {your_func_with_param(params)}
Works brilliantly. If only I had found this page first!!
Thanks JOBO (380718)!
Your is the perfect solution! >>>
el.onclick = new Function(’upload(value)’);
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?
Cheers Adam (post 379882) – That was exactly what I needed to get it all working with parameters.
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.
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)”);
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).
Thanks, Lin. Have already spent hours trying to figure out a solution. You’ve saved me many more.
Thanks a lot for the solution……
adam
Thanks, Thank you very much
I add my ‘thank you’ too!
Another would be (passing a parameter with quotes):
element.onclick = new Function(”function(’”+parameter+”‘)”);
That works! Thanks a lot.
ADAM Solution rocks….! :)
Thanks man !!!
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.
hi, is it possible to assign multiple functions for the onclick?