1

How do I run five JavaScript functions in one click?

Sample code:

<img alt="move right" 
     src="Pictures/sides/right.gif" 
     id="MoveRight" 
     ***onclick="javascript:moveObjRight('ground','sky','mountain');"***
     style="z-index: 1; left: 801px; top: 37px; position: absolute; height: 33px; width: 34px;" 
/>
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
hamze
  • 7,061
  • 6
  • 34
  • 43
  • I guess function calls are made synchronously. You can make a call only after the prev call is completed. I am not sure though. – Anji Apr 26 '11 at 05:35

4 Answers4

4

You can add all your functions in the onclick property of the img tag

<img onclick="fnc1();fnc2();..." />
Liviu T.
  • 23,584
  • 10
  • 62
  • 58
4
<img alt="move right" src="Pictures/sides/right.gif" id="MoveRight"
    onclick="moveObjRight('ground','sky','mountain');myFunction2();myFunction3();myFunction4();myFunction5();"
    style="z-index: 1; left: 801px; top: 37px; position: absolute; height: 33px;
    width: 34px;" />

or

<script type="text/javascript">
window.onload = function() {
    var ele = document.getElementById('MoveRight');
    ele.onclick = function() {
        moveObjRight('ground','sky','mountain');
        myFunction2();
        myFunction3();
        myFunction4();
        myFunction5();
    }
};
</script>

Note that the second option will override any previously assigned window.onload and ele.onclickfunction. If you are using a javascript library use the appropriate dom ready event (e.g. jQuery: $(document).ready(function(){/*code*/}); or short: $(function(){/*code*/}))

Thomas
  • 3,004
  • 23
  • 17
  • 1
    @Thomas MyFunction2() will be called only after moveObjRight(..) right? Is there any way to call all the functions async? – Anji Apr 26 '11 at 05:41
  • is it possible to run functions in thread mode, i mean all functions run in one time not one by one? – hamze Apr 26 '11 at 05:49
  • not really, remember that all javascript engines (i'm aware of) run javascript synchronous - even when a event function like onclick is executed all other javascript on that page is halted. – Thomas Apr 26 '11 at 05:50
  • not really, while you loose control to when it is run it will never execute 2 functions at the same time. `setTimeout`'s real purpose is to run a function at a later time (btw. note that it is not guaranteed that it will run exactly after the specified time/milliseconds). – Thomas Apr 26 '11 at 06:11
  • i think its possible with setTimeout. http://stackoverflow.com/questions/5786646/stop-function-that-run-with-settimeout – hamze Apr 26 '11 at 06:12
  • You can make callbacks at the end of a function or run function after a certain time (`setTimeout`) or attach a function to a event (like onclick) however you can't make multiple functions run simultaneously (within a single page). To be clear if you want all five functions as in the example above to run onclick as fast as possible this is the right way. – Thomas Apr 26 '11 at 06:30
  • 1
    Javascript is **single threaded**, you can't run functions asynchronously. You can run xmlHTTPRequests asynchronously, but when they return, their callback functions will be placed in a queue and run in their turn. setTimeout allows functions to be run after some interval, but does not provide any kind of asynchronous behaviour. – RobG Apr 26 '11 at 08:12
1

You can call a single method on your on click event and in that method you can call all your other methods.

ajm
  • 12,863
  • 58
  • 163
  • 234
0

Call multiple functions in an other function

<script type="text/javascript">
   function CallMultipleFunctions() {
     Function1();
     Function2();
     Function3();
     Function4();
}
</script>

<img onclick= "CallMultipleFunctions()"/>

EDIT:

Check this link

Javed Akram
  • 15,024
  • 26
  • 81
  • 118
  • is it possible to run functions in thread mode, i mean all functions run in one time not one by one? – hamze Apr 26 '11 at 05:48
  • For all programming considerations, Javascript is single-threaded`[1]` However, because the web browser model is single-threaded, all four functions *will* run before the user gets control back. You'll need to say why you need something different before we could advise you on other solutions. `[1]`Yes, there are web-workers, but those can't interact with the UI so I'm ignoring them. – Jeremy J Starcher Nov 22 '12 at 19:00