Self Learning: Harry tries this code to toggle a CSS class when a button is clicked, but it doesn’t work. Why?
Self Learning: Harry tries this code to toggle a CSS class when a button is clicked, but it doesn’t work. Why?
I have been reading this book "Modern Javascript for the Impatient", chapter "Object-Oriented Programming". At the end there is an "Exercise" section. This is a question from it I need help answering:
Harry tries this code to toggle a CSS class when a button is clicked:
const button = document.getElementById('button1')
button.addEventListener('click', function () {
this.classList.toggle('clicked')
})
It doesn’t work. Why?
Sally, after searching the wisdom of the Internet, suggests:
button.addEventListener('click', event => {
event.target.classList.toggle('clicked')
})
This works, but Harry feels it is cheating a bit. What if the listener hadn’t produced the button as event.target? Fix the code so that you use neither this nor the event parameter.
0
comments