Chovy's Blog

Web Development with Node.js, PHP, Javascript, and HTML5

By

Javascript: Dynamically Change onclick Event

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

  • Pingback: » dynamically generated onclick events for dynamically generated elements Shoel's i-log book

  • Mimi

    YOU ROCK DARKO!!!

  • Athahar

    Hey kevin,

    I think you can try

    mybutton.onclick = new Function(“saveFile(” + xmlDoc + “,” + location + “ )”);

  • Kevin

    Thanks for the code and explanation.

    How can I reference a function and include a parameter.

    I need to include two inputs, xmlDoc and location, for my saveFile function. Without those inputs, my saveFile won’t work.

    var myButton = document.getElementsByName(“saveButton”)[0];
    myButton.onclick = saveFile(xmlDoc,location);

    Thanks,
    Kevin

  • http://knowhow.floschx.com Floschx

    Great post – helped for SharePoint NewForm.aspx – one of the best descriptions I found on the net…

  • Pingback: Dynamically Change onclick Event with parameters - Knight.Liao's Tale

  • ABC

    found problem… it shld be like
    up.setAttribute(“onclick”,’updateEdit(‘+e+’)');
    insted of
    up.setAttribute(“onclick”=updateEdit(e));

  • Ami

    hi… I am dynamically inserting a button using javascript. and i want to call a function on click of that button. how to do that??
    what i have tried is :
    var up = document.createElement(‘INPUT’);
    up.setAttribute(“value”,”update”);
    up.setAttribute(“id”,”update_”+e);
    up.setAttribute(“type”,”button”);
    up.setAttribute(“onclick”=updateEdit(e));
    but its not working… can anyone help me?

  • diabl0

    i’ve also tried this :
    document.getElementById(j+’ref’).setAttribute(‘onclick’, ‘changeBg(‘+j+’,'+k+’)');
    but no result !!:S

  • diabl0

    hii
    darko your solution didn’t work for me :s i’ve tried in vain !!
    ==>
    document.getElementById(j+’ref’).onclick=new function(){“changeBg(“+j+”,”+k+”)”;};

    j and k are numbers !!

  • Res2

    how beautiful short code, thank you very much

  • François

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

  • John

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

  • Josh

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

  • Josh

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

  • Deepa

    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”

  • Kc

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

  • Cat

    Thanks darko! Lifesaver man.

  • http://- Mandar

    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

  • Kelvin

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

  • http://www.ta-tt.com ayhtut

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

  • Attila

    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.

  • SAGAR SHINDE

    Thanks
    short and sweet

  • Tester

    Thanks Buddy, u saved a lot of time

  • swapana

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

    • http://www.chovy.com chovy

      reserved words…PITA.

  • http://nnn sagar

    thanks
    simply greate

  • Mduduzi

    Thanks Darko… your a genius :)

  • Joshua

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

  • darko

    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

  • http://www.hometuitionclasses.com Brent

    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?