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.01084
- 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.
Hi, i wanna add 2 of the links that changes 2 frames together. Is it possible to name them differently so that they do not link to the same pages?
Hey, I had the same problem that chad was experiencing that was never solved here so I figured I would make a post because I found the answer searching through the thread.
My first task was to create a button that generates as many input fields and corresponding submit buttons as the user wanted. Each input would need its own id, such as input1, input2, input3, etc and each button would need to use these ids in its own onclick event. The problem was that for some reason when I used something like:
button.onclick = function(){someFunctionName(‘input’+counter);};
or
button.onclick = someFunctionName;
it would use only the final counter value in the dynamically generated button’s onclick event. However when I changed the buttons onclick to:
button.onclick = new Function(“someFunctionName(‘input” + counter + “‘)”); it worked like a charm
so the moral of the story: use the new Function() method if you need dynamically generated onclick events for dynamically generated elements.
thanks to everyone that helped me find the solution
Ah, element.onclick has to be assigned a _function_. Thanks, you saved my bacon.
I did it with a function declaration:
function theOnclickFunction() {
… code …
}
theElementy.onclick = theOnclickFunction;
but I like darko’s anonymous function approach:
theElement.onclick = function() { …code… }
Thanks Darko… your a genius :)
thanks
simply greate
thanks alot Brent!! you have save my lots of time
i was doing rnd on these from 2days and got no results
thanks alot
reserved words…PITA.
Thanks Buddy, u saved a lot of time
Thanks
short and sweet
It is fine, but how can i assign a function that would take the “this” as parameter?
in normal html it would look like:
ffggg
how can i assign this onclick function dynamically, with the “this” parameter pointing to the right object?
And the worst point of that, it should work in chrome as well, the function assignment didn’t worked at all yet.
function A(me) {
alert(‘A’);
me.onclick = new Function(“B(this)”);
}
function B(maythaw) {
alert(‘B’);
maythaw.onclick = new Function(“A(this)”);
}
Thank you ayhtut. I spent AGES on this by trying to set the OnClick attribute – to no avail!
Your example works a treat :)
thank you buddy for suggesting call by refrence…
worked very well for me. i’ve been stuck in this cupple of hrs. Solved my prob now
Thanks darko! Lifesaver man.
Thanks a lot!! This actually saved me a lot of time, after trying to figure out what was wrong with my onclick attribute.
If I have to pass a variable other than ‘this’ how do I go about it…
Following is the snippet
var li = document.createElement(“li”);
li.innerHTML = ”+response.items[i].name;
var URI=response.items[i].URI;
li.onclick= new Function(“callStatus(URI)”);
list.appendChild(li);
I get an error saying “URI is undefined”
el.setAttribute(‘onclick’,’showPopup());
el.setAttribute(‘onclick’,’showPopup()’);
sorry, left off the last single quote. You can dynamically add the onclick using .setAttribute. Passing parameters works too.
el.setAttribute(‘onclick’,’showPopup(‘ + someparam + ‘)’);
Thank you Darko. Yoursolution saved a lot of work for me.
cool! Josh
Thank a lot!
it’s work (setAttribute(‘onclick’,'fonction with parameters’)
how beautiful short code, thank you very much