Interactive Rating Component

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 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 use forEach 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 helpful

  1

  ---

  

  Avinash Dhauni•170

  @avinashdhauniPosted about 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
• 

  Satyam Jha•400

  @satyammjhaPosted about 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

  ---

  

  Avinash Dhauni•170

  @avinashdhauniPosted about 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

  

  Satyam Jha•400

  @satyammjhaPosted about 2 years ago

  @avinashdhauni Sorry for that but the approach will definitely work. I myself have applied the same while completing my challenge.

  1