Why the event does not work when clicking on an element? (simple to-do list project)

Question

I try to boost my JavaScript knowledge. For this, I sometimes create some simple projects. As a reference, I use the only developer.mozilla resource and I recently tried to figure it out with localStorage. For this, I decided to create an elementary to-do list on pure JavaScrip. And I think, I figured out the principles of work localStorage. But I ran into other confusions.

When I add a new item to the list it's adding without any problem and displaying on the app interface. But when I try to mark it as done or delete it. Nothing comes. I just need to reload the page and then I can delete or mark the task completed without any problems.

HTML part




    
    
        ToDoList

And here is the part of the JavaScript code responsible for adding the item to the list:

const chooseCathegory = document.getElementById('choose-cathegory');
const categoryWrapper = document.getElementById('category-wrapper');
const listCathegoryItem = document.querySelectorAll('.list__cathegory-item');
const addListBtn = document.getElementById('add_list');
const clearList = document.getElementById('clear-list');
const listArray = JSON.parse(localStorage.getItem('listArray')) || [];

function listCreator(){

let itemsArray = JSON.parse(localStorage.getItem('listArray'));
let listItemContent = "";
for (item in itemsArray) {
    listItemContent +=
        ''+
        ''
        +itemsArray[item]+
        ''+
        ''+
        ''+
        ''+
        ''+
        '';
}
document.getElementById("list-item__wrapper").innerHTML = listItemContent;
}

addListBtn.addEventListener('click', function(){

let addListFieldValue = document.getElementById('add-list__field').value;
const retrievedData = localStorage.getItem("favoriteItems");
let checkForMatches = JSON.parse(localStorage.getItem('listArray'));

if(checkForMatches !== null && checkForMatches.includes(addListFieldValue)){
    alert("Come up with something original;")
}else{

    listArray.push(addListFieldValue);
    localStorage.setItem('listArray', JSON.stringify(listArray));
    listCreator();
}

});
window.addEventListener('load', listCreator())

And this piece of code is responsible for deleting an element and marking it as done.

/*** Remove Item from List ***/

let removeItem = document.querySelectorAll('.remover');

removeItem.forEach(item=>{
    item.addEventListener('click', function(){
        this.closest('.list-item').style.display='none';
        let dataItem =  this.getAttribute('data-item');
        let existingEntries = JSON.parse(localStorage.getItem('listArray'));
        existingEntries.splice(dataItem, 1)
        localStorage.setItem("listArray",JSON.stringify(existingEntries));
        let completArray = JSON.parse(localStorage.getItem('completArray'));
        completArray.splice(dataItem, 1)
        localStorage.setItem("completArray",JSON.stringify(completArray));
    });

});  


/*** Mark as Complete ***/

let markComplet = document.querySelectorAll('.list-item__content');
const completArray = JSON.parse(localStorage.getItem('completArray')) || [];

markComplet.forEach(item=>{

item.addEventListener('click', function(){
    let dataItem =  this.getAttribute('data-item');
    completArray.push(dataItem);
    localStorage.setItem('completArray', JSON.stringify(completArray));
    addCompletLine();
});

function addCompletLine(){
    let dataItem =  item.getAttribute('data-item');
    if(completArray.includes(String(dataItem))){
        item.classList.add('active')
    }
}

window.addEventListener('load', addCompletLine())

});

I tried to swap functions. But all the same, the code works the same: I added an element, I try to delete it or mark it as executed, it doesn't work until you reload the page. I understand that somewhere there is a gross mistake, but I cannot find it because I do not have enough experience. Please help me to figure it out.

Andrew · Accepted Answer

For it to work without reloading the page, you would need to add the click event listener after each list item is added.

Currently you're adding the event handler to all .remover elements when the page loads, but that wouldn’t* add the event listener to each element that is added after.

corrected would to wouldn’t

Why the event does not work when clicking on an element? (simple to-do list project)

Answers (2)

Related Questions