Почему не срабатывает функция?

Question

[AlexandrMa]

Внезапно обнаружил, что функция не работает. Все перерыл, не пойму причину. Из-за чего не работает функция внутри тега?

<input type="button" value="START" id="test" onclick="console.log('1')">

document.getElementById('test').onclick = () => console.log('2');

Вывод только 2.

Comments

[AlexandrMa]

Единственное, что нашел, это то, что только один может быть обработчик. Последний.
Видимо это провал((((
Много кода придется менять.

[szQocks]

AlexandrMa, может быть не один обработчик, просто твоя запись написания аттрибутом и elem.onclick они равноценны друг другу

повесь второй обработчик через addEventListener

[Aetae]

AlexandrMa, рубрика "вредные советы": даже если б не существовало нормального способа, то нет причины расстраиваться, ведь всегда можно сделать так(не надо):

const test = document.getElementById('test');
const oldOnClick = test.onclick;

test.onclick = function (event) {
  oldOnClick.call(this, event);
  console.log('2')
};

Answer 1

[Rsa97]

Дык onclick - это свойство. В нём одновременно может быть только одна функция.
Используйте addEventListener.

Comments

[AlexandrMa]

Спасибо!

Answer 2

[Антон Антон]

https://developer.mozilla.org/en-US/docs/Web/API/E... уже не модно?
а вообще если оставить только html, то будет вывод 1, а если добавить код на js, то он не добавит а заменит обработчик. А вот при использовании традиционного подхода работают все обработчики:

<input type="button" value="START" id="test" onclick="console.log('1')" />

const el = document.getElementById('test')

el.addEventListener('click', () => console.log('2'));
el.addEventListener('click', () => console.log('3'));

Comments

[AlexandrMa]

Спасибо!