onclick='' 在尝试 Chrome 扩展程序时不起作用

Question

我正在尝试制作一个 Chrome 扩展程序，但是由于内联 JavaScript，onclick='' 在使用时不起作用，下面是我使用的代码：

let createTasks = () => {
    TaskContainer.innerHTML = `<span class='TextMyTask'>My Tasks</span>`
        data.map((x,y) => {
            TaskContainer.innerHTML +=`
            <div id=task${y} class='secondtaskcontainer'>
                <span class='tasktextclass'>${y+1}${'-'}${x.text}</span></br>
                <span class='datetextclass'>${'To do on date : '}${x.thedate}</span></br>
                <span class='descriptiontextclass'>${'This task consists to : '}${x.description}</span></br>
                <span class='urgencytextclass'>${'This task is : '}${x.urgency}</span>
                <i class="Edit" id='edit' onclick='Edittask(this)'>&#x270E;</i>
                <i  class="Trash" id='trash' onclick='Removetask(this); createTasks()'>&#128465;</i>
            </div>`
        })
    clearform()  
    savedata()  
}

function Removetask(e){ 
    Taskid = e.parentElement.id
    let removedTask =document.getElementById('Taskid')
    const lastChar = Taskid.at(-1);
    e.parentElement.remove(removedTask)
    data.splice(lastChar,1)
    savedata()
}

function Edittask(e){
        openpopup()
        let selectededitedTaskid = e.parentElement.id
        const lastChareditedtask = selectededitedTaskid.at(-1)
        InputTask.value = data[lastChareditedtask].text
        InputDate.value = data[lastChareditedtask].thedate
        Description.value = data[lastChareditedtask].description
        Urgency.value = data[lastChareditedtask].urgency
        Removetask(e)
        savedata()
}

我尝试删除 onclick='' 并将其替换为 addEventlistener 使用 var Edit = document.getElementById('edit') 和 Edit.addEventListener('click', Edittask()) 但随后我收到错误消息“无法读取 null 的属性”，因为尚未创建元素。有人可以帮我解决这个问题吗？

Answer 1

The issue you're facing with the `addEventListener` approach is that you're invoking the `Edittask` function immediately instead of assigning it as the event listener. You need to pass the function reference without the parentheses. Here's the corrected code:

let createTasks = () => {
    TaskContainer.innerHTML = `<span class='TextMyTask'>My Tasks</span>`;
    data.map((x, y) => {
        TaskContainer.innerHTML +=`
        <div id=task${y} class='secondtaskcontainer'>
            <span class='tasktextclass'>${y+1}${'-'}${x.text}</span></br>
            <span class='datetextclass'>${'To do on date : '}${x.thedate}</span></br>
            <span class='descriptiontextclass'>${'This task consists to : '}${x.description}</span></br>
            <span class='urgencytextclass'>${'This task is : '}${x.urgency}</span>
            <i class="Edit" id='edit'>&#x270E;</i>
            <i class="Trash" id='trash'>&#128465;</i>
        </div>`;
    });

    clearform();
    savedata();

    // Add event listeners after elements are created
    const editButtons = document.getElementsByClassName('Edit');
    for (let i = 0; i < editButtons.length; i++) {
        editButtons[i].addEventListener('click', Edittask);
    }

    const trashButtons = document.getElementsByClassName('Trash');
    for (let i = 0; i < trashButtons.length; i++) {
        trashButtons[i].addEventListener('click', function() {
            Removetask(this);
            createTasks();
        });
    }
};

// Rest of your code...

在更新的代码中，创建元素并将其附加到 DOM 后，我们使用

addEventListener

将事件侦听器添加到编辑和垃圾按钮。我们使用

getElementsByClassName

选择按钮并循环遍历集合，将事件侦听器分别附加到每个按钮。请注意，对于垃圾按钮，我们使用匿名函数在单击按钮时调用

Removetask

和

createTasks

函数。

确保从 HTML 代码中删除

onclick

属性，因为我们以编程方式附加事件侦听器。