DEV Community

Cover image for Call Multiple Functions onclick - [SOLVED]
CyberBotMachines
CyberBotMachines

Posted on • Updated on

Call Multiple Functions onclick - [SOLVED]

TL;DR Summary

Calling multiple functions with onclick event is very simple (and actually obvious once you hear it).

So the key is to call one function but inside you can call as many other functions you want. Something like this:

function aggregateFunc() {
  first();
  second();
}
Enter fullscreen mode Exit fullscreen mode

And that's it.

And if you want to learn HTML, CSS and JS much faster check out this new learning method.

More Details

If you want the full code for calling multiple functions on onclick event then you can copy the code below:

<style>
  body { 
    background-color: bisque; 
    padding: 300px;
    text-align: center;
  }
  button {
    font-size: 30px;
    border: 3px solid orangered;
    border-radius: 10px;
    background-color: orange;
  }
</style>

<button onclick="aggregateFunc()">
  Call Multiple Functions
</button>

<script>
  function first() { console.log('first'); }
  function second() { console.log('second'); }

  function aggregateFunc() {
    first();
    second();
  }
</script>
Enter fullscreen mode Exit fullscreen mode

And this is all there is to calling multiple functions with onclick event.

Until next time,
Will

Discussion (0)