Having trouble making a lineThrough in a todo list. (vanillaJS)

Hello there Campers,

Having trouble trying to make a button do a lineThrough to my list items meaning i want to complete the list, not sure what is going on but it only those the first element, any guideness will be appreciated, thanks!.

Side Note: Also its a good practice to have 2 addEventListener ? like the code:
removeItems and completeItems functions


listItems.addEventListener('click', removeItems);
listItems.addEventListener('click', completeItems);

code sample bellow.

id attribute values are supposed to be unique. If you assign the same value to an id, the selector will only pick the first one it finds. That is why only the first list item is affected.

Hi @RandellDawson
So its seems it only does the last element of the NodeList, and if i do inside the for loop it does all at the same time, I’m sure im missing something i might not know a stepback.
So i changed the id attributes to classes, and have then iterate each one of them.

 function completeItems(event){
    if( event.target && event.target.nodeName === 'BUTTON' && event.target.classList.contains('complete') ){

        var complete = document.querySelectorAll('.crossing');
        for( var j = 0; j < complete.length; j++ ){
          var elComplete = complete[j];
        }
        //myCross.classList.toggle('lineThrough');
        if( elComplete.classList.contains('lineThrough')){
            elComplete.classList.remove('lineThrough');
        }else{
          elComplete.classList.add('lineThrough');
        }
    }

};

That is because the following for loop reassigns a different element to elComplete during each iteration. The last iteration assigns the last element. After the loop ends, you check the last element assigned to elComplete.