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
– JasCav, Commented Mar 14, 2011 at 20:12
Know about JQuery, can only use Javascript in this case. Thanks. — Tony Stark
– Tony Stark, Commented Mar 14, 2011 at 20:13
The onclick property should be in all lowercase. developer.mozilla.org/en/DOM/element.onclick — Matt Ball
– Matt Ball, Commented Mar 14, 2011 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
– Mikael Östberg, Commented Mar 14, 2011 at 20:16
Turns out I didn't need the +=. I think += wouldn't remove the existing onclick function, right? — Tony Stark
– Tony Stark, Commented Mar 14, 2011 at 20:22

Ryan · Accepted Answer · 2011-03-14 20:14:58Z

136

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, 2011 at 20:14

Ryan

1,6961 gold badge12 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

GoldfishGrenade Over a year ago

Just wanted to add that Ryan does not include the parentheses after Bar because it is not a function call.

pashute Over a year ago

... you probably want to do something like this: .onclick = HideError; // if this won't work, why not. What's the diff from above answer?

Patrick Over a year ago

@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.

Otuyh · Accepted Answer · 2011-03-14 20:23:06Z

88

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

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

answered Mar 14, 2011 at 20:23

Otuyh

2,4945 gold badges23 silver badges41 bronze badges

5 Comments

Deepak G M Over a year ago

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!

user66001 Over a year ago

Should be onclick, not onClick.

Kyle Over a year ago

@user66001 it doesn't matter, HTML is not case sensitive

user66001 Over a year ago

@Calne - camel case'ng it might make people think it needs to be.

Sujay Phadke Over a year ago

Is this still true? 'onClick' did not work for me, but 'onclick' did.Using Chrome 47 on Windows 7 64-bit.

Community · Accepted Answer · 2017-05-23 12:18:16Z

26

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, 2017 at 12:18

CommunityBot

11 silver badge

answered Mar 14, 2011 at 20:13

John Giotta

17.1k7 gold badges55 silver badges83 bronze badges

6 Comments

Tony Stark Over a year ago

Unfortunately, i have a parameter that needs to be there. Does that change your answer?

user236139 Over a year ago

@hatorade: use onclick = function () { Foo(params); };

John Giotta Over a year ago

@hatorade - Yes document.getElement... function() { Foo(param);};

Tony Stark Over a year ago

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!

GlennG Over a year ago

should that be .onclick not .onClick?

|

TheSatinKnight · Accepted Answer · 2017-05-08 01:44:23Z

16

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 8, 2017 at 1:44

TheSatinKnight

7427 silver badges16 bronze badges

Comments

Šime Vidas · Accepted Answer · 2011-03-14 20:25:40Z

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, 2011 at 20:25

answered Mar 14, 2011 at 20:15

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

1 Comment

OhFiddleDiddle Over a year ago

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!

Kyle · Accepted Answer · 2015-09-11 14:30:02Z

7

You could try changing the button attribute like this:

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

edited Sep 11, 2015 at 14:30

Kyle

1,5792 gold badges20 silver badges49 bronze badges

answered Nov 5, 2014 at 17:42

João Paulo Oliveira

3293 silver badges2 bronze badges

Comments

Richard Marskell - Drackir · Accepted Answer · 2011-03-14 20:18:29Z

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, 2011 at 20:18

Richard Marskell - Drackir

13.4k3 gold badges37 silver badges55 bronze badges

1 Comment

RolandiXor Over a year ago

Perfect answer! For someone not really familiar with javascript, this is a very helpful method.

anotheruser1488182 · Accepted Answer · 2018-03-28 15:39:17Z

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

Collectives™ on Stack Overflow

Change onclick action with a Javascript function

8 Answers 8

3 Comments

5 Comments

6 Comments

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

3 Comments

5 Comments

6 Comments

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related