Interactive Rating Component with HTML, CSS and JS
Design comparison
Solution retrospective
I know you can use stopPropagation() to stop events from bubbling but for some reason I was having trouble getting that to work.
Is there anyone that used event delegation to handle events for this or any JavaScript related project?
Any feedback would be much appreciated.
Community feedback
- @buneeIsSloPosted over 2 years ago
@hyrongennike, Your solution seems to be working great, where and why do you want to use
stopPropagation()
?0@hyrongennikePosted over 2 years ago@buneeIsSlo Hi no I'm happy with the solution I had a weird bug where clicking on the container would deselect the selected rating couldn't for the life of me figure out why so I just found a workaround but would like to know if I might be missing something.
1@buneeIsSloPosted over 2 years ago@hyrongennike The workaround you've applied is what I had in mind. This problem arises because you're listening for click events on the container rather than the rating buttons themselves. Speaking of, using an anchor tag as a button doesn't work well in this scenario. I would replace them with actual
<button>
tags and add "click" event listeners on each one of them.If I haven't made myself clear, please use this codepen by Elaine to research and learn.
Hope this helps :)
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord