Change onclick action with a Javascript function

Question

I have a button:

<button id="a" onclick="Foo()">Button A</button>

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)";
}

I'm not making this an answer since you are specifically asking about vanilla JavaScript, but you may want to look into jQuery. It's a JavaScript library that can help you do what you are looking to do in your question. — JasCav, Mar 14 '11 at 20:12
Know about JQuery, can only use Javascript in this case. Thanks. — Tony Stark, Mar 14 '11 at 20:13
The `onclick` property should be in all lowercase. https://developer.mozilla.org/en/DOM/element.onclick — Matt Ball, Mar 14 '11 at 20:15
Aren't event handlers added by using += ? And perhaps you might even need to do this: `myobject.onclick += function() { Foo(); }` — Mikael Östberg, Mar 14 '11 at 20:16
Turns out I didn't need the +=. I think += wouldn't remove the existing onclick function, right? — Tony Stark, Mar 14 '11 at 20:22

score 131 · Accepted Answer · answered Mar 14 '11 at 20:14

131

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); }

answered Mar 14 '11 at 20:14

Ryan

1,646
1
12
8

15

Just wanted to add that Ryan does not include the parentheses after Bar because it is not a function call. – GoldfishGrenade Nov 07 '14 at 04:01
... you probably want to do something like this: .onclick = HideError; // if this won't work, why not. What's the diff from above answer? – pashute Jun 01 '16 at 04:04
@pashute The difference is that `.onclick = HideError` is going to invoke `HideError(event: MouseEvent)` whereas the above answer invokes `HideError(id)`. If you don't care about parameters, then you can do the shorter version and ignore the event that gets passes in. – Patrick Oct 18 '19 at 16:04

score 85 · Answer 2 · answered Mar 14 '11 at 20:23

85

var Foo = function(){
    document.getElementById( "a" ).setAttribute( "onClick", "javascript: Boo();" );
}

var Boo = function(){
    alert("test");
}

answered Mar 14 '11 at 20:23

Otuyh

2,384
5
22
40

2

This seems to be the best way to do it. Though others work, adding a function directly to onclick may not work in some scenarios. I faced an issue in a case where creating multiple buttons in a loop and assigning a function for onclick for each button in the loop was not working. It would assign the function for the last button to all the buttons. Using this method works like a charm. Thanks Hor! – Deepak G M Jan 22 '13 at 08:59
2

Should be `onclick`, not `onClick`. – user66001 Mar 30 '14 at 15:22
@user66001 it doesn't matter, HTML is not case sensitive – Kyle Sep 11 '15 at 13:59
@Calne - camel case'ng it might make people think it needs to be. – user66001 Sep 11 '15 at 15:22
2

Is this still true? 'onClick' did not work for me, but 'onclick' did.Using Chrome 47 on Windows 7 64-bit. – Sujay Phadke Dec 26 '15 at 08:07

score 25 · Answer 3 · edited May 23 '17 at 12:18

25

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); };

edited May 23 '17 at 12:18

Community

1
1

answered Mar 14 '11 at 20:13

John Giotta

16,432
7
52
82

Unfortunately, i have a parameter that needs to be there. Does that change your answer? – Tony Stark Mar 14 '11 at 20:15
1

@hatorade: use onclick = function () { Foo(params); }; – Reid Mar 14 '11 at 20:17
@hatorade - Yes `document.getElement... function() { Foo(param);};` – John Giotta Mar 14 '11 at 20:18
Thank you all for the help. I'd give you the answer if I could, but Ryan got it a few mins sooner. Sorry :(. I did +1 though! – Tony Stark Mar 14 '11 at 20:22
1

should that be .onclick not .onClick? – GlennG Aug 15 '13 at 11:43
@GlennG Personally, I've never seen a difference, but documentation says lowercase onclick – John Giotta Aug 15 '13 at 17:01
Thank you for your answer! Simple and elegant – Lepy Dec 17 '21 at 14:26

score 15 · Answer 4 · answered May 08 '17 at 01:44

15

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+");" );

answered May 08 '17 at 01:44

TheSatinKnight

696
7
16

Šime Vidas · Answer 5 · 2011-03-14T20:25:40.123

11

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:

<button id="a" onclick="toggleError(this)">Button A</button>

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/

edited Mar 14 '11 at 20:25

answered Mar 14 '11 at 20:15

Šime Vidas

182,163
62
281
385

I personally like this solution because it keeps the code for the button together (and being a toggle, if you update one side, usually you want to update the other side), but I was also working with Vue and using v-on:click, so the top answer didn't seem to be working for me. Thanks Sime! – OhFiddleDiddle Sep 10 '19 at 06:08

score 6 · Answer 6 · edited Sep 11 '15 at 14:30

6

You could try changing the button attribute like this:

element.setAttribute( "onClick", "javascript: Boo();" );

edited Sep 11 '15 at 14:30

Kyle

1,568
2
20
46

answered Nov 05 '14 at 17:42

João Paulo Oliveira

319
3
2

score 4 · Answer 7 · answered Mar 14 '11 at 20:18

4

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.

answered Mar 14 '11 at 20:18

Richard Marskell - Drackir

13,080
3
33
54

Perfect answer! For someone not really familiar with javascript, this is a very helpful method. – RolandiXor Sep 15 '17 at 03:37

score 1 · Answer 8 · answered Mar 28 '18 at 15:39

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: <input type="hidden" name="foo" value="bar" />

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

Change onclick action with a Javascript function

8 Answers8

Linked