Javascript: Dynamically Change onclick Event

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]
Rating: 7.0/10 (84 votes cast)
VN:F [1.8.4_1055]
Rating: +4 (from 22 votes)
Javascript: Dynamically Change onclick Event7.01084

71 Responses to “Javascript: Dynamically Change onclick Event”

  1. Brent says:

    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?

    UN:F [1.8.4_1055]
    Rating: 3.3/5 (7 votes cast)
    UN:F [1.8.4_1055]
    Rating: -4 (from 6 votes)
  2. darko says:

    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

    UN:F [1.8.4_1055]
    Rating: 4.9/5 (11 votes cast)
    UN:F [1.8.4_1055]
    Rating: +9 (from 15 votes)
  3. Joshua says:

    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… }

    UN:F [1.8.4_1055]
    Rating: 3.4/5 (5 votes cast)
    UN:F [1.8.4_1055]
    Rating: +1 (from 1 vote)
  4. Mduduzi says:

    Thanks Darko… your a genius :)

    UN:F [1.8.4_1055]
    Rating: 3.7/5 (3 votes cast)
    UN:F [1.8.4_1055]
    Rating: 0 (from 0 votes)
  5. sagar says:

    thanks
    simply greate

    UN:F [1.8.4_1055]
    Rating: 3.8/5 (4 votes cast)
    UN:F [1.8.4_1055]
    Rating: +2 (from 4 votes)
  6. swapana says:

    thanks alot Brent!! you have save my lots of time
    i was doing rnd on these from 2days and got no results
    thanks alot

    UN:F [1.8.4_1055]
    Rating: 5.0/5 (2 votes cast)
    UN:F [1.8.4_1055]
    Rating: +1 (from 1 vote)
  7. chovy says:

    reserved words…PITA.

    UN:F [1.8.4_1055]
    Rating: 0.0/5 (0 votes cast)
    UN:F [1.8.4_1055]
    Rating: +1 (from 3 votes)
  8. Tester says:

    Thanks Buddy, u saved a lot of time

    UN:F [1.8.4_1055]
    Rating: 0.0/5 (0 votes cast)
    UN:F [1.8.4_1055]
    Rating: +1 (from 1 vote)
  9. SAGAR SHINDE says:

    Thanks
    short and sweet

    UN:F [1.8.4_1055]
    Rating: 0.0/5 (0 votes cast)
    UN:F [1.8.4_1055]
    Rating: +1 (from 1 vote)
  10. Attila says:

    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.

    UN:F [1.8.4_1055]
    Rating: 0.0/5 (0 votes cast)
    UN:F [1.8.4_1055]
    Rating: 0 (from 0 votes)
  11. ayhtut says:

    function A(me) {
    alert(‘A’);
    me.onclick = new Function(“B(this)”);
    }
    function B(maythaw) {
    alert(‘B’);
    maythaw.onclick = new Function(“A(this)”);
    }

    UN:F [1.8.4_1055]
    Rating: 3.8/5 (5 votes cast)
    UN:F [1.8.4_1055]
    Rating: +1 (from 3 votes)
  12. Kelvin says:

    Thank you ayhtut. I spent AGES on this by trying to set the OnClick attribute – to no avail!
    Your example works a treat :)

    UN:F [1.8.4_1055]
    Rating: 0.0/5 (0 votes cast)
    UN:F [1.8.4_1055]
    Rating: 0 (from 0 votes)
  13. Mandar says:

    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

    UN:F [1.8.4_1055]
    Rating: 5.0/5 (1 vote cast)
    UN:F [1.8.4_1055]
    Rating: 0 (from 0 votes)
  14. Cat says:

    Thanks darko! Lifesaver man.

    UN:F [1.8.4_1055]
    Rating: 0.0/5 (0 votes cast)
    UN:F [1.8.4_1055]
    Rating: 0 (from 0 votes)
  15. Kc says:

    Thanks a lot!! This actually saved me a lot of time, after trying to figure out what was wrong with my onclick attribute.

    UN:F [1.8.4_1055]
    Rating: 0.0/5 (0 votes cast)
    UN:F [1.8.4_1055]
    Rating: 0 (from 0 votes)
  16. Deepa says:

    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”

    UN:F [1.8.4_1055]
    Rating: 0.0/5 (0 votes cast)
    UN:F [1.8.4_1055]
    Rating: 0 (from 0 votes)
  17. Josh says:

    el.setAttribute(‘onclick’,’showPopup());

    UN:F [1.8.4_1055]
    Rating: 0.0/5 (0 votes cast)
    UN:F [1.8.4_1055]
    Rating: 0 (from 0 votes)
  18. Josh says:

    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 + ‘)’);

    UN:F [1.8.4_1055]
    Rating: 5.0/5 (1 vote cast)
    UN:F [1.8.4_1055]
    Rating: +2 (from 2 votes)
  19. John says:

    Thank you Darko. Yoursolution saved a lot of work for me.

    UN:F [1.8.4_1055]
    Rating: 0.0/5 (0 votes cast)
    UN:F [1.8.4_1055]
    Rating: 0 (from 0 votes)
  20. François says:

    cool! Josh
    Thank a lot!
    it’s work (setAttribute(‘onclick’,'fonction with parameters’)

    UN:F [1.8.4_1055]
    Rating: 0.0/5 (0 votes cast)
    UN:F [1.8.4_1055]
    Rating: 0 (from 0 votes)
  21. Res2 says:

    how beautiful short code, thank you very much

    UN:F [1.8.4_1055]
    Rating: 5.0/5 (1 vote cast)
    UN:F [1.8.4_1055]
    Rating: +1 (from 1 vote)

Leave a Reply