Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Updating Element Attributes</title> <style> .favorite { font-weight: bold; color: gold; } .info { color: darkblue; } </style> </head> <body> <h4>Click on the list item below to see the result!</h4> <ul id="product-list"> <li>Product 1</li> <li>Product 2</li> <li>Product 3</li> </ul> <script> const productList = document.getElementById('product-list'); productList.addEventListener('click', (event) => { if (event.target.tagName === 'LI') { event.target.classList.toggle('favorite'); document.body.insertAdjacentHTML('beforeend', `<p class="info">Toggled favorite status for: ${event.target.textContent}</p>`); } }); </script> </body> </html>