How to change onClick handler dynamically

Question

I m sure there are a million posts about this out there  but surprisingly I m having trouble finding something    I have a simple script where I want to set the onClick handler for an  lt A gt  link on initialization of the page   When I run this I immediately get a  foo  alert box where I expected to only get an alert when I click on the link   What stupid thing am I doing wrong   I ve tried click  and onClick        lt script language  javascript  gt       function init             document getElementById  foo   click   new function     alert  foo               lt  script gt    lt body onload  init    gt       lt a id  foo  href   gt Click to run foo lt  a gt   lt  body gt      Edit  I changed my accepted answer to a jQuery answer  The answer by  M  r   rlygsson  is technically the correct answer to my original question  click should be onclick and new should be removed  but I strongly discourage anyone from using  document getElementById      directly in their code - and to use jQuery instead

User · Answer

I agree that using jQuery is the best option. You should also avoid using body's onload function and use jQuery's ready function instead. As for the event listeners, they should be functions that take one argument:

document.getElementById("foo").onclick = function (event){alert('foo');};

or in jQuery:

$('#foo').click(function(event) { alert('foo'); }

User · Answer

Use  onclick  all lowercase   Like so   document getElementById  foo   onclick   function        alert  foo       do your stuff   return false      lt -- to suppress the default link behaviour      Actually  you ll probably find yourself way better off using some good library  I recommend jQuery for several reasons  to get you up and running  and writing clean javascript   Cross-browser  in compatibilities are a right hell to deal with for anyone - let alone someone who s just starting

User · Answer

OMG    It s not only a problem of  jQuery Library  and  getElementById    Sure  jQuery helps us to put cross-browser problems aside  but using the traditional way without libraries can still work well  if you really understand JavaScript ENOUGH     Both  M  r   rlygsson and  Darryl Hein gave you good ALTARNATIVES I d say  they re just altarnatives  not anwsers   where the former used the traditional way  and the latter jQuery way  But do you really know the answer to your problem  What is wrong with your code   First   click is a jQuery way  If you want to use traditional way  use  onclick instead  Or I recommend you concentrating on learning to use jQuery only  in case of confusing  jQuery is a good tool to use without knowing DOM enough   The second problem  also the critical one  new function     is a very bad syntax  or say it is a wrong syntax   No matter whether you want to go with jQuery or without it  you need to clarify it   There are 3 basic ways declaring function   function name     code         function    code     known as anonymous function or function literal        new Function  code      Function Object   Note that javascript is case-sensitive  so new function   is not a standard syntax of javascript  Browsers may misunderstand the meaning   Thus your code can be modified using the second way as     function   alert       Or using the third way as     new Function  alert         Elaborating on it  the second way works almost the same as the third way  and the second way is very common  while the third is rare  Both of your best answers use the second way   However  the third way can do something that the second can t do  because of  runtime  and  compile time   I just hope you know new Function   can be useful sometimes  One day you meet problems using function      don t forget new Function     To understand more  you are recommended read  lt  lt  JavaScript  The Definitive Guide  6th Edition     O Reilly

User · Answer

Here is the YUI counterpart to the jQuery posts above    lt script gt    YAHOO util Event onDOMReady function            document getElementById  foo   onclick    function    alert  foo             lt  script gt

User · Answer

I think you want to use jQuery s  bind and  unBind methods  In my testing  changing the click event using  click and  onclick actually called the newly assigned event  resulting in a never-ending loop    For example  if the events you are toggling between are hide   and unHide    and clicking one switches the click event to the other  you would end up in a continuous loop  A better way would be to do this     element  unbind   bind   click    function    alert

User · Answer

I agree that using jQuery is the best option. You should also avoid using body's onload function and use jQuery's ready function instead. As for the event listeners, they should be functions that take one argument:

document.getElementById("foo").onclick = function (event){alert('foo');};

or in jQuery:

$('#foo').click(function(event) { alert('foo'); }

User · Answer

Here is the YUI counterpart to the jQuery posts above    lt script gt    YAHOO util Event onDOMReady function            document getElementById  foo   onclick    function    alert  foo             lt  script gt

User · Answer

The YUI example above should really be    lt script gt    YAHOO util Event onDOMReady function             Dom get  foo   onclick    function    alert  foo             lt  script gt

User · Answer

I tried more or less all of the other solutions the other day  but none of them worked for me until I tried this one   var submitButton   document getElementById  submitButton    submitButton setAttribute  onclick     alert  hello         As far as I can tell  it works perfectly

User · Answer

Try   document getElementById  foo   onclick   function    alert  foo

User · Answer

Use  onclick  all lowercase   Like so   document getElementById  foo   onclick   function        alert  foo       do your stuff   return false      lt -- to suppress the default link behaviour      Actually  you ll probably find yourself way better off using some good library  I recommend jQuery for several reasons  to get you up and running  and writing clean javascript   Cross-browser  in compatibilities are a right hell to deal with for anyone - let alone someone who s just starting

User · Answer

I agree that using jQuery is the best option. You should also avoid using body's onload function and use jQuery's ready function instead. As for the event listeners, they should be functions that take one argument:

document.getElementById("foo").onclick = function (event){alert('foo');};

or in jQuery:

$('#foo').click(function(event) { alert('foo'); }

User · Answer

I agree that using jQuery is the best option. You should also avoid using body's onload function and use jQuery's ready function instead. As for the event listeners, they should be functions that take one argument:

document.getElementById("foo").onclick = function (event){alert('foo');};

or in jQuery:

$('#foo').click(function(event) { alert('foo'); }

User · Answer

The YUI example above should really be    lt script gt    YAHOO util Event onDOMReady function             Dom get  foo   onclick    function    alert  foo             lt  script gt

User · Answer

Use  onclick  all lowercase   Like so   document getElementById  foo   onclick   function        alert  foo       do your stuff   return false      lt -- to suppress the default link behaviour      Actually  you ll probably find yourself way better off using some good library  I recommend jQuery for several reasons  to get you up and running  and writing clean javascript   Cross-browser  in compatibilities are a right hell to deal with for anyone - let alone someone who s just starting

User · Answer

Try   document getElementById  foo   onclick   function    alert  foo

User · Answer

OMG    It s not only a problem of  jQuery Library  and  getElementById    Sure  jQuery helps us to put cross-browser problems aside  but using the traditional way without libraries can still work well  if you really understand JavaScript ENOUGH     Both  M  r   rlygsson and  Darryl Hein gave you good ALTARNATIVES I d say  they re just altarnatives  not anwsers   where the former used the traditional way  and the latter jQuery way  But do you really know the answer to your problem  What is wrong with your code   First   click is a jQuery way  If you want to use traditional way  use  onclick instead  Or I recommend you concentrating on learning to use jQuery only  in case of confusing  jQuery is a good tool to use without knowing DOM enough   The second problem  also the critical one  new function     is a very bad syntax  or say it is a wrong syntax   No matter whether you want to go with jQuery or without it  you need to clarify it   There are 3 basic ways declaring function   function name     code         function    code     known as anonymous function or function literal        new Function  code      Function Object   Note that javascript is case-sensitive  so new function   is not a standard syntax of javascript  Browsers may misunderstand the meaning   Thus your code can be modified using the second way as     function   alert       Or using the third way as     new Function  alert         Elaborating on it  the second way works almost the same as the third way  and the second way is very common  while the third is rare  Both of your best answers use the second way   However  the third way can do something that the second can t do  because of  runtime  and  compile time   I just hope you know new Function   can be useful sometimes  One day you meet problems using function      don t forget new Function     To understand more  you are recommended read  lt  lt  JavaScript  The Definitive Guide  6th Edition     O Reilly

User · Answer

If you want to pass variables from the current function  another way to do this is  for example   document getElementById  space1   onclick   new Function  lrgWithInfo    myVar          If you don t need to pass information from this function  it s just   document getElementById  space1   onclick   new Function  lrgWithInfo  13

User · Answer

jQuery       foo   click function     alert  foo          Or if you don t want it to follow the link href       foo   click function     alert  foo    return false

User · Answer

I think you want to use jQuery s  bind and  unBind methods  In my testing  changing the click event using  click and  onclick actually called the newly assigned event  resulting in a never-ending loop    For example  if the events you are toggling between are hide   and unHide    and clicking one switches the click event to the other  you would end up in a continuous loop  A better way would be to do this     element  unbind   bind   click    function    alert

User · Answer

Try   document getElementById  foo   onclick   function    alert  foo

User · Answer

jQuery       foo   click function     alert  foo          Or if you don t want it to follow the link href       foo   click function     alert  foo    return false

User · Answer

I tried more or less all of the other solutions the other day  but none of them worked for me until I tried this one   var submitButton   document getElementById  submitButton    submitButton setAttribute  onclick     alert  hello         As far as I can tell  it works perfectly

User · Answer

Nobody addressed the actual problem which was happening  to explain why the alert was issued    This code  document getElementById  foo   click   new function     alert  foo       assigns the click property of the  foo element to an empty object  The anonymous function in here is meant to initialize the object  I like to think of this type of function as a constructor  You put the alert in there  so it gets called because the function gets called immediately    See this question

User · Answer

Use  onclick  all lowercase   Like so   document getElementById  foo   onclick   function        alert  foo       do your stuff   return false      lt -- to suppress the default link behaviour      Actually  you ll probably find yourself way better off using some good library  I recommend jQuery for several reasons  to get you up and running  and writing clean javascript   Cross-browser  in compatibilities are a right hell to deal with for anyone - let alone someone who s just starting

User · Answer

If you want to pass variables from the current function  another way to do this is  for example   document getElementById  space1   onclick   new Function  lrgWithInfo    myVar          If you don t need to pass information from this function  it s just   document getElementById  space1   onclick   new Function  lrgWithInfo  13

User · Answer

Try   document getElementById  foo   onclick   function    alert  foo

User · Answer

Nobody addressed the actual problem which was happening  to explain why the alert was issued    This code  document getElementById  foo   click   new function     alert  foo       assigns the click property of the  foo element to an empty object  The anonymous function in here is meant to initialize the object  I like to think of this type of function as a constructor  You put the alert in there  so it gets called because the function gets called immediately    See this question

User · Answer

jQuery       foo   click function     alert  foo          Or if you don t want it to follow the link href       foo   click function     alert  foo    return false

User · Answer

jQuery       foo   click function     alert  foo          Or if you don t want it to follow the link href       foo   click function     alert  foo    return false

[javascript] How to change onClick handler dynamically?

Examples related to javascript

Examples related to function