Добавление слушателя к кнопке, созданной .innerHTML

Question

Я пытаюсь добавить слушателя к кнопке, созданной .innerHTML после получения слушателя.Это код:

let inputConfirm = document.getElementById('inputConfirm');
let inputText = document.getElementById('inputText');
let displayList = document.getElementById('displayList');

inputConfirm.addEventListener('click', e=>listElement())
const listElement = () => {

    let inputValue = inputText.value //takes input from textbox
    let newValue = "<li class='each-item'><div class='listbox'>" + inputValue + "<input type='checkbox' class='checkbox'><button class='delete-button'>X</button></div></li>"; //EACH list element that I want to add to the ordered list.
    if(inputValue !== ""){
        displayList.innerHTML += newValue;
        inputText.value = "";//clears the text box
    };
};

Мне нужно, чтобы кнопка с классом «delete-button», созданная с помощью переменной newValue, была доступна для нажатия и отправки console.log

Answer 1

Непонятно, что вы хотите вывести на консоль, но простой способ - добавить событие onclick в .innerHTML и добавить функцию.

let inputConfirm = document.getElementById('inputConfirm');
let inputText = document.getElementById('inputText');
let displayList = document.getElementById('displayList');

inputConfirm.addEventListener('click', e=>listElement())
const listElement = () => {

    let inputValue = inputText.value //takes input from textbox
    let newValue = "<li class='each-item'><div class='listbox'>" + inputValue + "<input type='checkbox' class='checkbox'><button class='delete-button' onclick='toConsole(event)'>X</button></div></li>"; //EACH list element that I want to add to the ordered list.
    if(inputValue !== ""){
        displayList.innerHTML += newValue;
        inputText.value = "";//clears the text box
    };
};

function toConsole(e){
    console.log(e.target);
}