onclick='' is not working when trying a Chrome extension

Question

I am trying to make a Chrome extension however onclick='' is not working when used due to inline javascript below is the code I use:

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

I tried to remove the onclick='' and replacing it with addEventlistener using var Edit = document.getElementById('edit') and Edit.addEventListener('click', Edittask()) but then I get the error message 'Cannot read properties of null' as element is not yet created. May somebody help me solve this problem?

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...

In the updated code, after creating the elements and appending them to the DOM, we add event listeners to the edit and trash buttons using addEventListener. We select the buttons using getElementsByClassName and loop through the collection to attach the event listeners to each button individually. Note that in the case of the trash buttons, we're using an anonymous function to call both Removetask and createTasks functions when the button is clicked.

Make sure to remove the onclick attributes from the HTML code since we're attaching the event listeners programmatically.