Customer rating widget built using HTML, CSS and Vanilla JavaScript

Solution retrospective
Is there a simpler way to build the record rating function? I've made five separate functions, but I wonder if it's possible to combine these?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @vglumac
Hi Samantha! You can use a querySelectorAll in order to select all your buttons and than repeat the same function for each of them:
const buttons = document.querySelectorAll('.rating'); buttons.forEach(button => { ... });
forEach() function can also be used to track the index of the selected button:
buttons.forEach((button, index) => { ... });
I hope this helps!
Marked as helpful - @Cyril-Arinze
Hello, Samantha, Congratulation on completing this challenge. Now, Based on your question. you can simplify your code by placing a click event listener on all your rating button with the class = "rating". Then use the "this.id" keyword to get the id of the clicked button. you can the pass the id when the submit button is clicked.
if you find my comment helpful, do mark it as helpful
Marked as helpful
Join 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