How to toggle text decorations

Question

How do I toggle the line-through ( textDecoration ) on the list below when clicked?

 const items = document.querySelectorAll('li'); items.forEach(item => { item.addEventListener('click', (e) => { e.target.style.textDecoration.toggle('line-through'); }) })

 <ul> <li>buy milk</li> <li>read a book</li> <li>play the guitar</li> <li>pay the bills:(</li> </ul>

This doesn't work, but

e.target.style.textDecoration = 'line-through'

adds the line-through where I want it, I just don't know how I can do this using the toggle function? I know I could this with If Else statements.

Answer 1

You can toggle based on the current value of that style property.

 const items = document.querySelectorAll('li'); items.forEach(item => { item.addEventListener('click', (e) => { item.style.textDecoration = item.style.textDecoration === 'line-through'? '': 'line-through'; }) })

 <ul> <li>buy milk</li> <li>read a book</li> <li>play the guitar</li> <li>pay the bills:(</li> </ul>

Alternatively, toggle a class.

 const items = document.querySelectorAll('li'); items.forEach(item => { item.addEventListener('click', (e) => { item.classList.toggle('line-through'); }) })

 .line-through { text-decoration: line-through; }

 <ul> <li>buy milk</li> <li>read a book</li> <li>play the guitar</li> <li>pay the bills:(</li> </ul>