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
    };
};

我需要通过newValue变量创建的带有“删除按钮”类的按钮才能被单击并发送控制台。

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);
}

向.innerHTML创建的按钮添加侦听器

1 个答案: