Change onclick action with a Javascript function

Question

I have a button    lt button id  a  onclick  Foo    gt Button A lt  button gt    When I click this button the first time  I want it to execute Foo  which it does correctly    function Foo       document getElementById  a   onclick   Bar        What I want to happen when I click the button the first time is to change the onclick function from Foo   to Bar    Thus far  I ve only been able to achieve an infinite loop or no change at all  Bar   would look something like this   function Bar       document getElementById  a   onclick   Foo        Thus  clicking this button is just alternating which function gets called  How can I get this to work  Alternatively  what s a better way to show hide the full text of a post  It originally starts shorted  and I provide a button to  see the full text   But when I click that button I want users to be able to click the button again to have the long version of the text go away   Here s the full code  if it helps   function ShowError id        document getElementById id  className   document getElementById id  className replace   bheight limited b            document getElementById id  Text   className   document getElementById id  Text   className replace   bheight limited b            document getElementById id  Button   innerHTML    HIDE FULL ERROR       document getElementById id  Button   onclick   HideError id      function HideError id        document getElementById id  className      height limited       document getElementById id  Text   className      height limited       document getElementById id  Button   innerHTML    SHOW FULL ERROR       document getElementById id  Button   onclick    ShowError id

User · Accepted Answer

Your code is calling the function and assigning the return value to onClick, also it should be 'onclick'. This is how it should look.

document.getElementById("a").onclick = Bar;

Looking at your other code you probably want to do something like this:

document.getElementById(id+"Button").onclick = function() { HideError(id); }

User · Answer

Thanks to Jo  o Paulo Oliveira  this was my solution which includes a variable  which was my goal    document getElementById   myID    setAttribute   onClick    myFunction   VALUE

User · Answer

What might be easier  is to have two buttons and show hide them in your functions   ie  display none block   Each button could then have it s own onclick with whatever code you need   So  at first button1 would be display block and button2 would be display none  Then when you click button1 it would switch button2 to be display block and button1 to be display none

User · Answer

You could try changing the button attribute like this   element setAttribute   onClick    javascript  Boo

User · Answer

Do not invoke the method when assigning the new onclick handler   Simply remove the parenthesis   document getElementById  a   onclick   Foo    UPDATE  due to new information    document getElementById  a   onclick   function      Foo param

User · Answer

var Foo   function        document getElementById   a    setAttribute   onClick    javascript  Boo           var Boo   function        alert  test

User · Answer

I recommend this approach   Instead of having two click handlers  have only one function with a if-else statement  Let the state of the BUTTON element determine which branch of the if-else statement gets executed   HTML    lt button id  a  onclick  toggleError this   gt Button A lt  button gt    JavaScript   function toggleError button         if   button className      visible                 HIDE ERROR         button className             else              SHOW ERROR         button className    visible             Live demo  http   jsfiddle net simevidas hPQP9

User · Answer

For anyone  like me  trying to set a query string on the action and wondering why it s not working-  You cannot set a query string for a GET form submission  but I have found you can for a POST   For a GET submission you must set the values in hidden inputs e g   an action of    handleformsubmission foo bar   would have be added as the hidden field like   lt input type  hidden  name  foo  value  bar    gt   This can be done add dynamically in JavaScript as  where clickedButton is the submitted button that was clicked   var form   clickedButton form  var hidden   document createElement  input    hidden setAttribute  type    hidden    hidden setAttribute  name    foo    hidden setAttribute  value    bar    form appendChild hidden     See this question for more info submitting a GET form with query string params and hidden params disappear

[javascript] Change onclick action with a Javascript function

Examples related to javascript