Если вы хотите вызвать или выполнить несколько функций в одном событии нажатия кнопки, вы можете использовать метод JavaScript addEventListener(), как показано в следующем примере:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Call Multiple JavaScript Functions on Click of a Button</title>
</head>
<body>
<button type="button" id="myBtn">Click Me</button>
<script>
// Определение пользовательских функций
function sayHello(){
alert("Hello World! sayHello() function executed successfully!");
}
function sayHi(){
alert("Hi There! sayHi() function executed successfully!");
}
// Выбор элемента кнопки
var btn = document.getElementById("myBtn");
// Назначение listener'ов событий кнопке
btn.addEventListener("click", sayHello);
btn.addEventListener("click", sayHi);
</script>
</body>
</html>Подробнее см. Руководство по Event Listeners JavaScript, чтобы узнать больше о подключении нескольких обработчиков событий.
В качестве альтернативы вы также можете вызвать более одной функции JavaScript в одном событии onclick, например:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Execute Two JavaScript Function in One onClick Event</title>
</head>
<body>
<script>
// Определение пользовательских функций
function sayHello(){
alert("Hello World! sayHello() function executed successfully!");
}
function sayHi(){
alert("Hi There! sayHi() function executed successfully!");
}
</script>
<button type="button" onclick="sayHello();sayHi();">Click Me</button>
</body>
</html>Однако второй метод выглядит простым и легким, но вам следует избегать размещения кода JavaScript непосредственно внутри элемента HTML. Первый способ лучше и предпочтительнее.
