@jesse10930
Posted
Hi Kristina, your project looks great so far!
As to your issue with the event listener, the problem is that the target differs depending on where the mouse clicks inside the button, so the parent to which you are adding 'active' also differs. For example, if you hover on the very edge of the button and click, the 'body' element toggles the class of 'active'. If you hover on the svg image inside the button and click, the 'container-card' element toggles the class of 'active'. And if you hover inside the button but not on the svg and click, the 'article-container' element toggles the class of 'active'. So the reason it seems like it stops working is because if you click on the button to add 'active' but then move the mouse and click on a different spot in the button, the function is adding 'active' again, but to one of the other elements. And then to get rid of the active state, you'd have to click on each of those positions to remove 'active' from each of the elements to which 'active' was added.
I think your best bet would be to use querySelector to target a specific element to which you want to toggle the 'active' class inside your function, just like you did in the 'button' variable. This way the function always changes the same element rather than being dependent on 'e.target'.
button.addEventListener("click", function(e) {
document.querySelector(".container-card").classList.toggle("active");
});
Hope this helps! Happy coding :)
@kristinalesnjakovic
Posted
Hi Jesse, thank you so much! I already made a change as you advised and it works as expected :) But even more important, it is clear for me now why my solution didn't work as excepted.