JavaScript Error - Cannot set property 'textDecoration' of undefined [duplicate]

Question

I'm trying to create a click event for my button to change the text decoration I keep getting this error under the done event listener.

This is my code-

let li = document.createElement('li');
let rmv = document.createElement('button');
let done = document.createElement('button');    
      
rmv.classList.add('remove-button');
done.classList.add('done-button');      
li.classList.add('li-item');
      
rmv.textContent = 'X';
done.textContent = '✔️';      
      
rmv.addEventListener('click', handleRemove);
      
done.addEventListener('click', function(){ 
  txt.style.textDecoration = "line-through";
})   

Answer 1

This will fix it. It's better to utilize relative paths like this for dynamically created output. It gives you greater flexibility. To explain, e is the event of the click. The click listener always has a single argument event, and you can access the element that fired it with event.target. Then you find the closest 'li' container and apply the style to that. You can use the same logic to remove the element as well.

done.addEventListener('click', function(e){ 
  e.target.closest('li').style.textDecoration = "line-through";
})