Как задать обработчик события в скрипте?

Question

[Omniverse]

Здравствуйте.

Надо, чтобы при нажатии на кнопку запускалась какая-нибудь функция. Это можно сделать так:

function run() {
  alert("hello");
}

<button onclick="run()">Run</button>

Но как сделать то же самое, но без добавления атрибута onclick внутри тега button?
То есть назначать событие внутри скрипта.
Я пробовал так, но не получается:

function run() {
  alert("hi");
}
document.getElementsByTagName("button").onclick = run();

Answer 1

[Николай]

Комментаторы сверху немного странные вещи предлагают.
На самом деле всё намного проще:
document.querySelector("button").onclick = run;

Когда вы указываете оператор () - вы вызываете функцию а её результат попадает в onclick, вам же нужно чтобы в onclick попала ссылка на функцию.

Comments

[Omniverse]

Такая ошибка: Uncaught TypeError: Cannot set property 'onclick' of null

[Николай]

видимо нужно дождаться загрузки - в window.onload оберните.

[Omniverse]

Да, так работает, спасибо.

Answer 2

[pashted]

крч, это для первой попавшейся кнопки

document.getElementsByTagName("button")[0].onclick = function() {
    run();
}

а это для конкретной кнопки с id

document.getElementById("my_button").onclick = function() {
    run();
}

Answer 3

[Kovalsky]

document.querySelector("button").addEventListener('click', run);

function run() {
  alert("hi");
}

Comments

[Николай]

речь была о том, что пытался сделать автор и почему это не работало

[Kovalsky]

Николай: Иисус, утро оно такое. Поправлю

Answer 4

[Денис Букреев]

добавлю к ответу выше, что если надо все кнопычи обработать, то придется циклом пройтись по массиву, который получается при получении элемента по классу, имени тега и тд.
с ID такого нет