Multiple Functions With One Onclick
The onclick
attribute can be used in div
tags, form
buttons, img
image tags, a
link tags, and other HTML containers.
(HTML containers being HTML tags that can contain content. As examples, the br
tag isn't a container, but the td
tag is.)
Why use it? To make something happen when something is clicked. Ideas:
- Reveal content with a link click.
- Make a div disappear when it's clicked.
- Check an email address with a button click.
-
Send the browser to a different URL when the content in a
span
tag is clicked.
Pretty much anything a web developer can come up with.
Here's an example onclick
attribute to spawn an alert box.
onclick="alert('You clicked!')"
And here is how it might be used in a div
container.
<div
onclick="alert('You clicked!')"
style="padding:1em;
text-align:center;
border-radius:.5em;
border:3px solid skyblue;">
Content.
</div>
And here is the working implementation of the above example code.
But what if you want to do more than one thing with a click?
That's what this article is about.
How to Do Many Things With One Click
We'll use fictitious function names One(), Two(), and Three() to show how to implement the onclick
attribute for calling multiple functions.
There are two ways to do many things with one click:
-
Put all the function calls into the
onclick
attribute's value.Separate the function calls in the
onclick
attribute's value with a semi-colon character and optional space:onclick="One(); Two(); Three()"
With that method, any values the functions return will be ignored. Which is fine if you don't need a return value. An example would be functions (i) send you an email, (ii) make an Ajax request to update a log, and (iii) spawn an alert box with a thank-you message.
It's the simplest method if you don't need return values. -
Create a custom function to call the other functions.
The custom function calls the functions the
onclick
attribute shall call.This example contains a div with an onclick attribute that calls the
Custom()
function.Custom()
calls functions for theonclick
attribute and may process values returned from the functions it calls.<div onclick="Custom()">(div content)</div> <script> function Custom() { // Call function One() and deal with return value. var val = One(); alert("One() returned " + val + "."); } // Call function Two() and deal with return value. val = Two(); if( val == false ) { alert("Two() failed."); } // Call function Three() and deal with return value. val = Three(); if( val==false ) { alert("Three() returned false."); } else { alert("Three() returned true."); } return val; } </script>
The last line of the
Custom()
function that reads asreturn val;
causes the return of the value received from the last function that was called. It is there in case the callingonclick
needs the value.A form button might need the value. Here is an example
input
tag for a form button that needs the returned value so it can return the value to the form.<input type="submit" onclick="return Custom()" value="Click Me">
Those are the two ways an onclick
attribute can cause more than one function to run — listing the functions in the onclick
value or calling a custom function to run them. The latter method allows a programmer to make use of function return values.
(This article first appeared in Possibilities newsletter.)
Will Bontrager