Почему не выполняется onclick?

Question

[Илья Посаженников]

Есть кнопка, на которую я вешаю onclick, проверяю через console.dir, что функция на него повешана, но по нажатию на кнопку ничего не происходит. Если скопировать содержимое функции в консоль браузера, то всё работает. Пробовал с function expression и обычной функцией — не помогло.

let buttons = new Map([
    ["select_all", document.createElement("button")],
    ["exclude_all", document.createElement("button")],
    ["exclude_upload_not_completed", document.createElement("button")],
    ["exclude_coupling", document.createElement("button")],
    ["exclude_not_active", document.createElement("button")],
]);

// ...

buttons.get("select_all").onclick = () => {
    document.getElementById("pes")
        .querySelectorAll("input[type=checkbox]")
        .forEach(checkbox => {
            checkbox.checked = true;
    });
};

Comments

[szQocks]

дк у тебя кнопки то в html нет ?)

[Илья Посаженников]

szQocks, между двумя этими блоками я добавляю класс и вставляю кнопку в блок:

buttons.forEach(button => {
    button.type = "button";
    button.classList.add("btn");
    buttons_block.append(button);
    buttons_block.innerHTML += "\n";
});

[Егор Живагин]

Илья Посаженников, так может там и вешать onclick? Кажется, что на момент buttons.get("select_all") кнопки ещё не вставлены в DOM

[Илья Посаженников]

Егор Живагин, всё равно не работает, хоть и пишет, что onclick не пустой. Onclick вешал после вставки в DOM.

[szQocks]

Илья Посаженников, ты повесил обработчик на createElement а не на сам элемент в дом дереве

[Илья Посаженников]

szQocks, спасибо! Я думал, можно весить онклики на createElement.

Answer 1

[Илья Посаженников]

Оказывается, нельзя вешать onclick на createElement, только на сам элемент в DOM.

Источник: https://qna.habr.com/q/1221060#clarification_1619342

Answer 2

[historydev]

buttons.forEach(btn => {
	btn.onclick = () => {
      document.getElementById("pes")
          .querySelectorAll("input[type=checkbox]")
          .forEach(checkbox => {
              checkbox.checked = true;
      });
  };
  document.body.append(btn);
});