html не видит атрибут onclick

Question

С помощью js хочу добавить атрибут onclick, но не получается

function printA() {
  console.log('a')
}

function test() {
  let btn = document.createElement('button');
  btn.id = 'test';
  btn.onclick = 'printA()';
  document.body.appendChild(btn);
}

<input id="fI" value="5">
<input id="sI" value="8">
<button onclick="test();">go</button>
<div id="info"></div>

Answer 1

btn.onclick = printA;

btn.setAttribute("onclick", 'printA()');

Answer 2

Не все свойства, присваиваемые элементам в JS коде, становятся HTML-атрибутами.
Значением атрибута onclick в HTML по необходимости должна быть строка. Но значением свойства onclick в коде JS должна быть ссылка на функцию.

Вот так кнопка работает, хоть атрибута в коде кнопки вы не увидите:

function printA() {
  console.log('a')
}

function test() {
  let btn = document.createElement('button');
  btn.id = 'test';
  btn.textContent = 'test';
  btn.onclick = printA;
  document.body.appendChild(btn);
}

<input id="fI" value="5">
<input id="sI" value="8">
<button onclick="test();">go</button>
<div id="info"></div>

Answer 3

В HTML onclick="printA();" это то же самое, что в скрипте

btn.onclick = function() {
  printA();
};

Cвойство onclick ожидает функцию,
а вы btn.onclick = "printA()" присваиваете ей строку "printA()"

Или btn.onclick = printA — т.е. присвоить функцию, через её имя.
Или btn.setAttribute("onclick", "printA();")

А вообще, лучше не использовать ни то, ни другое)

document.getElementById("go").addEventListener("click", function() {
  document.body.insertAdjacentHTML("beforeEnd", '<button class="moo">test</button>');
});

document.addEventListener("click", function(e) {
  if (!e.target.matches(".moo")) return;
  // Если кликнули НЕ на элемент с классом "moo" - прервать функцию;

  // Иначе, вызвать printA   
  printA();
});

function printA() {
  console.log('a')
}

<button id="go">go</button>

БЛОГ НА HUSL

html не видит атрибут onclick

Ответы (3 шт):