Software, your way.
How To Get Good Custom Software
(Download)
(PDF)
burger menu icon
WillMaster

WillMaster > LibraryWebsite Development and Maintenance

FREE! Coding tips, tricks, and treasures.

Possibilities weekly ezine

Get the weekly email website developers read:

 

Your email address

name@example.com
YES! Send Possibilities every week!

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.

Content.

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

Was this article helpful to you?
(anonymous form)

Support This Website

Some of our support is from people like you who see the value of all that's offered for FREE at this website.

"Yes, let me contribute."

Amount (USD):

Tap to Choose
Contribution
Method

All information in WillMaster Library articles is presented AS-IS.

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.

How Can We Help You? balloons
How Can We Help You?
bullet Custom Programming
bullet Ready-Made Software
bullet Technical Support
bullet Possibilities Newsletter
bullet Website "How-To" Info
bullet Useful Information List

© 1998-2001 William and Mari Bontrager
© 2001-2011 Bontrager Connection, LLC
© 2011-2024 Will Bontrager Software LLC