Design comparison
Solution retrospective
I am still finding it hard to remove the background of the non-clicked ratings. I wanted something like if I click the single rating and after that if I click another rating then the clicked rating background should change and the other ratings background color remains the same.
I don't know if you guys understood but please check it out and click on multiple ratings. You will see that all the clicked elements change the background. But I just want to change the single clicked elements background and remove another rating background.
Community feedback
- @elaineleungPosted over 2 years ago
Hi Avinash, great work here in building out this component!
About your question, you just need to loop through the buttons again to remove the class. Let's say I select button 1, and then I select button 3. In your if/else statement, when I select button 3, the
selectedRating
is changed to 3, and if it has an active class, then it gets removed, and if not, then it gets the active class added. Since this is a newly selected button, it won't have the active class, and therefore will get the class added. However, this event listener is just for button "3"; there is nothing in this event handler that takes care of removing the class from button 1. All you need to do is just to useforEach
to find the button with the active class and then remove it; also, the two conditionals need to be separate.rating.forEach((e) => { e.addEventListener("click", (event) => { selectedRating = event.target.textContent; rating.forEach((e) =>{ if(e.classList.contains("active")){ e.classList.remove("active"); } }) if(e.textContent === selectedRating) { e.classList.add("active") } }) })
Good luck and hope this helps!
Marked as helpful1@avinashdhauniPosted over 2 years ago@elaineleung Amazing. It was such a basic thing. I just had to loop it once more inside the click. Thank You so much
1 - @satyammjhaPosted over 2 years ago
Great attempt Avinash. I have a solution for your query. On clicking the rating first remove the active class from all the ratings and add the active class to the targeted rating. You may use the code below:-
e.addEventListener("click", (event) => { rating.classList.remove("active") event.target.classList.add("active") selectedRating = event.target.innerHTML; }) }); ` This might help you. Happy Coding ✌🏻😊
0@avinashdhauniPosted over 2 years ago@satyammjha Hello, thank you for the reply. But sadly, this throws an exception.
TypeError- Cannot read properties of undefined (reading 'remove').
0@satyammjhaPosted over 2 years ago@avinashdhauni Sorry for that but the approach will definitely work. I myself have applied the same while completing my challenge.
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