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:

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

2. 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 the onclick 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 as return val; causes the return of the value received from the last function that was called. It is there in case the calling onclick 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">
   

   If the Custom() function's return is the value false, the submission aborts. Otherwise, the submission proceeds.

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