Как повесить 2 функции по нажатию одной кнопки в JavaScript (onclick)

  Александр Маврин   9 комментариев

2 функции на одно нажатие в JS

Привет, друзья. Есть задача: по нажатию одной кнопки должно срабатывать 2 функции в JS. Решается это очень просто, но у многих начинающих изучать программирование почему-то возникают с этим трудности. Давайте разберем пример с двумя функциями на событии onclick. И как и в предыдущем примере, когда мы делали нажатие на копку в JavaScript, можно пойти двумя способами. На странице есть такая кнопка:

<button type="submit" id="submit">Нажми меня</button>

Первый вариант:

1
2
3
4
5
6
7
8
document.querySelector("#submit").onclick = function(){
  console.log("Результат работы функции 1");
send2();
}
 
function send2(){
  console.log("Результат работы функции 2");
}

В итоге в консоли мы увидим ожидаемый результат:

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

1
2
3
4
5
6
7
function send1(){
  console.log("Результат работы функции 1");
}
 
function send2(){
  console.log("Результат работы функции 2");
}

А потом написать либо так:

1
2
3
4
document.querySelector("#submit").onclick = function(){
send1();
send2();
}

Либо так:

<button type="submit" id="submit" onclick="send1(); send2();">Нажми меня</button>

И таким образом кнопка будет обрабатывать сразу две кнопки, то есть будут происходить какие-то действия по нажатию одной кнопки. И как вы смогли догадаться — функций на одно событие можно повесить гораздо больше, чем две. Единственное о чем нужно подумать, это о целесообразности такого подхода. Действительно ли нужна такая необходимость?

Добавить страницу в закладки

9 комментариев
  1. Очень здорово! Испытал всё классно работает. Спасибо за понятное решение.

  2. Действительно ли нужна такая необходимость? Вот именно такой случай.Выполняется 2 функции и становится вопрос, как
    полученные значения в консоли использовать в дальнейших
    простейших арифметических действиях.
    Дело в том, что num1, num2 — значения полученные
    из свойства value двух блоков радио кнопок с своими именами prim и sime.

    Значение num1 и num2 использую в дальнйшем умножением,
    сложением и выводом на HTML страницу с перезаписью методом .innerHTML.
    Синтаксис с фигурными скобками не улавливаю при переходе от обоих функций к третьей функции расчётов. Помогите пожалуйста, понять проблему.

  3. Вот тестовая страница ….servis.kharkov.ua/calke/
    Это создание калькулятора с расширенными возможностями выбора гнутых элементов.
    Есть работающий этот же калькулятор с урезанными действиями на этой странице …..servis.kharkov.ua/re/
    Не хочет расширенный вариант работать или я синтаксис не правильно формирую. В консоли значения чётко выходят, а дальше в работе остаётся только перый результат цикла.

    • Александр Маврин:

      У вас расчеты производятся вне функции, которые срабатывают по клику, а нужно внутри. Как минимум написать еще одну функцию, в которую занести все расчеты. В данный момент вы не можете получить по клику value n1 и value n2. Надеюсь, что вы поняли о чем я))

      • Конечно понял Вас. Спасибо за потраченное время. Хотел сказать, что пытался включить всю математику внутрь этих функций, но тогда вторая функция переставала работать.

        Видимо, надо написать третью функцию за этими двумя или третью, в котрой разместить эти две.

        Ещё раз спасибо за ваше внимание. Просьба указать или прислать мне на почту № карты, чтобы была возможность пожертвовать на развитие вашего полезного для новичков блога. Нахожусь в стране блокирующей все сервисы Yandexa и мейл ру.

  4. Ура! Всё получилось. Для этого в строку с кликом по button вставил третью функцию для продолжения расчётов первых двух функций и получения по клику n1 и n2 с перезаписыванием через метод .innerHTML.
    Вы совершенно правы. Так же можно запускать любое количество функций одновременно одной кнопкой. А в интернете многие люди утверждали, что одновременно запускать функции в JS не возможно одним кликом. В моём случае, используя разные группы input type=»radio» name=»……» с разными именами по группам, создаём условия безусловного выбора параметров любых групп товаров и последующим обсчётом их ценовой категории. И это всё благодаря тому, что в поиске попал на ваш блог с конкретными примерами.

    • Александр Маврин:

      Отлично! Мне тоже раньше не хватало взгляда со стороны, когда не мог понять почему не работает код.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *