Вызов двух функций из одного onclick события: HTML и JS

Быстрый ответ

Чтобы вызвать несколько функций с помощью одного клика, просто объедините их, разделяя точкой с запятой:

<button onclick="firstAction(); secondAction();">Кликай</button>

Таким образом, функции firstAction и secondAction будут выполнены последовательно при нажатии на кнопку, что становится простым и кратким решением.

Контроль операторов возврата в функциях

Операторы возврата внутри функций могут прекратить их исполнение:

function firstAction() {
  if (foo) return; // Внимание! Этот return может остановить выполнение secondAction!
}
function secondAction() { /* Второе действие... */ }

Использование addEventListener() для улучшения обработки событий

Если вам нужен более структурированный и понятный код, лучше использовать метод addEventListener(), а не встроенные обработчики событий:

document.getElementById('myButton').addEventListener('click', function() {
  firstAction(); // Реализация первого действия.
  secondAction(); // Затем идет второе действие.
});

Такой подход повысит удобство поддержки и развития кода, следуя последним стандартам веб-разработки.

Использование обертывающей функции для обеспечения выполнения функций

Использование обертывающих функций поможет сохранить последовательность выполнения функций даже при внутренней ошибке. Для этого можно применить конструкцию try-finally:

function handleOnClick() {
  try {
    firstAction(); // Выполняем действие, несмотря на возможные ошибки.
  } finally {
    secondAction(); // И всё равно мы должны выполнить второе действие.
  }
}

Таким образом, secondAction будет выполнена в любом случае, даже если в firstAction произойдет ошибка, благодаря конструкции try-finally.

Визуализация

Представьте механизм onclick как дирижёра (🎬), управляющего оркестром, где каждый инструмент (🎻) внесёт свою музыкальную фразу по очереди.

<button onclick="conductorCall()">Начнем!</button>

Вызов дирижера (🎬):

function conductorCall() {
  firstSymphony();  // 🎻 Первая функция отыгрывает свою партию.
  secondSymphony(); // 🎻 За ней следует вторая функция.
}

Каждая функция рассматривается как симфония в концерте вашего сайта, исполняя свои части в структурированном порядке под управлением дирижера.

🎬👉 🎻 Симфония 1: Выступление первой функции начинается.
🎬👉 🎻 Симфония 2: Затем выступает вторая функция.

Нажатие на кнопку Начнем! служит знаком для начала нашего "концерта" в веб-пространстве.

Обеспечение надежности выполнения функций

Асинхронные функции: обещание гармоничного выполнения

С асинхронными функциями выполнение может стать нестабильным, но использование Promises или async/await всё исправляет:

async function conductorCall() {
  await firstSymphony(); // Подождем завершения первой симфонии.
  await secondSymphony(); // Теперь настала очередь второй симфонии.
}

Подробнее об этом расскажет наш спикер на видео

Обработка ошибок: надёжная сеть

Ошибки всегда могут случиться. Мы можем их обработать с помощью try-catch, чтобы они не поломали наш "концерт":

function conductorCall() {
  try {
    firstSymphony();
  } catch(error) {
    console.error('В первой симфонии возникла ошибка:', error);
  }
  try {
    secondSymphony();
  } catch(error) {
    console.error('Вторая симфония запнулась:', error);
  }
}

Повышение читаемости кода через разделение обработчиков событий

Для более чёткого кода отделите HTML от JavaScript:

const button = document.getElementById('playButton');
button.addEventListener('click', conductorCall);

Такой подход не только помогает организовать код, но и оптимизирует его для работы с поисковыми системами.

Полезные материалы

1. HTML атрибут onclick — обзор атрибута onclick в HTML.
2. Введение в события браузера — глубокий погружение в события браузера в JavaScript с описанием onclick.
3. EventTarget: метод addEventListener() – Веб-API | MDN — всё о методе addEventListener() для назначения обработчиков событий в JavaScript.
4. CodePen — интернациональная платформа для обмена кодовыми фрагментами среди разработчиков.
5. language agnostic – How should I do floating point comparison? – Stack Overflow — полезная дискуссия о сравнении вещественных чисел.