Как сделать вызов функции при нажатии кнопки через javascript?

Чтобы сделать вызов функции при нажатии на кнопку, сначала в html документе создаём кнопку. Например, так:

<button id="myButton">Press me!</button>

Теперь переходим в подключенный к html документу javascript файл.

• Объявляем функцию, которую хотим вызывать при нажатии на кнопку:

const callback = () => {
  alert("Hello, World!");
};

• Получаем кнопку:

const button = document.querySelector('#myButton');

• С помощью метода addEventListener() добавляем кнопке обработчик событий. Первым аргументом передаем событие в виде строки, в нашем случае это будет клик по кнопке, вторым аргументом передаем функцию, которая вызывается при наступлении события:

button.addEventListener('click', callback);

Теперь при нажатии кнопки увидим всплывающее окно с надписью Hello, World!.

Рн о от ролллтирроллло

Функцию при нажатии на кнопку вызывают через обработчик события click:

<button id="saveButton" type="button">Сохранить</button>

<script>
  function save() {
    console.log('Сохранено');
  }

  const button = document.getElementById('saveButton');
  button.addEventListener('click', save);
</script>

Передавайте функцию без скобок: addEventListener('click', save). Со скобками save() функция выполнится сразу при загрузке страницы, а в обработчик попадёт её результат.

С аргументами

button.addEventListener('click', () => {
  save('черновик');
});

Атрибут onclick

<button onclick="save()">Сохранить</button>

Работает, но смешивает HTML и JavaScript. Через onclick можно повесить только один обработчик, а addEventListener позволяет несколько.

Ошибка Cannot read properties of null (reading 'addEventListener')

Скрипт выполнился до того, как кнопка появилась на странице. Решения:

• подключите скрипт перед </body>;
• или добавьте defer: <script src="app.js" defer></script>.

Кнопка в форме перезагружает страницу

<button> внутри <form> по умолчанию отправляет форму. Укажите type="button" или отмените отправку:

form.addEventListener('submit', (event) => {
  event.preventDefault();
  save();
});

Несколько кнопок

document.querySelectorAll('.like').forEach((btn) => {
  btn.addEventListener('click', () => {
    btn.classList.toggle('active');
  });
});

Если кнопки добавляются на страницу позже, повесьте один обработчик на родителя и проверяйте event.target.closest('.like').

В React

<button onClick={save}>Сохранить</button>

События и работу с DOM разбирают в бесплатном курсе «Основы JavaScript».