call multiple function with one button javascript

Question

i'd like to know if its possible to call several function with one html button?

<button onclick:"functions()">Calls</button>

So could anyone try to explain to me if it is possible and how and maybe show me through some code snippets or anything.

You can all one function from the button and inside the called function call other functions. — Imanpal Singh, May 09 '20 at 04:18
Does this answer your question? [Call two functions from same onclick](https://stackoverflow.com/questions/16025138/call-two-functions-from-same-onclick) — first result when searching _“js call multiple functions on button click”_. Is there a specific problem you’re having with some _attempt_ that you’re not showing us? — Sebastian Simon, May 09 '20 at 04:47

Woold · Accepted Answer · 2020-05-09T14:11:48.473

Yes it is possible, like so: This is the best option because you attach the event handler to the DOM node with javascript see this

html:

<button id="calls">Calls</button>

javascript:

document.getElementsById('calls').addEventListener('click', function(){
    function1();
    function2()
})
function function1() {
    //whatever you want which will be called first by the button
}
function function2() {
    //whatever you want which will be called second by the button
}

document.getElementById('calls').addEventListener('click', function(){
    function1();
    function2()
})
function function1() {
    console.log("function1 was called first")
}
function function2() {
    console.log("function2 was called second")
}

<button id="calls">Calls</button>

or so:

html:

<button onclick="function1();function2();">Calls</button>

javascript:

function function1() {
    //whatever you want which will be called first by the button
}
function function2() {
    //whatever you want which will be called second by the button
}

function function1() {
    console.log("function1 was called first")
}
function function2() {
    console.log("function2 was called second")
}

<button onclick="function1();function2();">Calls</button>

or so:

html:

<button onclick="functions()">Calls</button>

javascript:

function functions() {
    function1();
    function2();
}
function function1() {
    //whatever you want which will be called first by the button
}
function function2() {
    //whatever you want which will be called second by the button
}

function functions() {
    function1();
    function2();
}
function function1() {
    console.log("function1 was called first")
}
function function2() {
    console.log("function2 was called second")
}

<button onclick="functions()">Calls</button>

SMAKSS · Answer 2 · 2020-05-23T18:06:32.793

First of all, you're better off not using onclick at all and attaching the event handler to the DOM node through your Javascript code. This is known as Unobtrusive_JavaScript.

In order to bind multiple functions to one button, you can either do this (But it is not preferred at all):

function fn(){
  console.log('fn is called!');
}

function fn2(){
  console.log('fn2 is called!');
}

function fn3(){
  console.log('fn3 is called!');
}

<button onclick="fn(); fn2(); fn3();">Calls</button>

Or bind your function with addEventListener like this (This is the most preferred approach for calling multiple functions):

document.getElementsByTagName('button')[0].addEventListener('click', function(){
  fn();
  fn2();
  fn3();
})

function fn() {
  console.log('fn is called!');
}

function fn2() {
  console.log('fn2 is called!');
}

function fn3() {
  console.log('fn3 is called!');
}

<button>Calls</button>

score 2 · Answer 3 · answered May 09 '20 at 04:25

2

You can just do that:

<button onclick="function1();function2()">Calls</button>

answered May 09 '20 at 04:25

Rob Nisru

29
2

While this code may provide a solution to problem, it is highly recommended that you provide additional context regarding why and/or how this code answers the question. Code only answers typically become useless in the long-run because future viewers experiencing similar problems cannot understand the reasoning behind the solution. – palaѕн May 09 '20 at 05:25

score 0 · Answer 4 · answered May 09 '20 at 04:23

0

you can execute multiple function by order

function f1()
{
  alert("execution of f1");
}
function f2()
{
  alert("execution of f2");
}
function f3()
{
  alert("execution  of f3");
}

<button onclick="f1();f2();f3();">Click Me</button>

answered May 09 '20 at 04:23

Ahmad Hamzavi

626
6
18

call multiple function with one button javascript

4 Answers4