вызвать несколько функций одной кнопкой javascript

Question

Я хотел бы знать, можно ли вызвать несколько функций с помощью одной кнопки html?

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

Так может ли кто-нибудь попытаться объяснить мне, возможно ли это и как, и, возможно, показать мне через какие-то фрагменты кода или что-то в этом роде.

Answer 1

Да, возможно, вот так: это лучший вариант, потому что вы прикрепляете обработчик событий к узлу DOM с помощью javascript см. 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>

или около того:

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>

или около того:

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>

Answer 2

Прежде всего, вам лучше вообще не использовать onclick и прикрепить обработчик событий к узлу DOM с помощью кода Javascript. Это известно как Unobtrusive_ JavaScript.

Чтобы привязать несколько функций к одной кнопке, вы можете сделать это (но это не рекомендуется вообще):

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>

Или привяжите свою функцию к addEventListener следующим образом (это наиболее предпочтительный подход для вызова нескольких функций):

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>

Answer 3

Вы можете просто сделать это:

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

Answer 4

вы можете выполнить несколько функций по заказу

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>