Vanilla Javascript: transforming appendChild li (to-do list)

1

Hello Coding Friends,

I’m a stop-and-go learner of Javascript, still a beginner, and I’m working on creating a to-do list app. Right now, the app successfully takes user input, creates and appends an li item (yay!)
Next, I would like for the user to be able to click on the new li item once the task has been completed and have it crossed off. This is the bit of code I’m struggling with:

// to cross off a completed item
const tasks = document.querySelectorAll('.to-do-list li');
// loops through each li element and listens for click 
for (task of tasks) {
    task.addEventListener('click', function() {
        this.style.textDecoration='line-through';
    });
}

You can see the app so far at https://codepen.io/srhbishop/pen/vYOPXBm.
Thank you!

2

At the moment you setup your JS to only execute once. So everytime you add an item to the list, it is not adding the eventListener to the li.

If by clicking the add button will append a new li to the DOM. Add the event listener there in the process.

Does that make sense?

3

So should I add the eventListener for the li click inside the addListBtn.addEventListener?