Interactive rating component using radio buttons

Community feedback

• 

  yishak abrham•2,150

  @yishak621Posted almost 2 years ago

  even though the edit feature is good there is a little bug to fix ...when i try to click any number on the rating button it add active class to all others buttons which is less than the clicked number ...so fix that it should add the active class to the clicked one only if the user change idea and click other button it should remove active class from the previous number and add to the clicked one ....use forEach method like these

  function callBack() { 
     //logic-when we click on the btns container[ratingbtns] 
     ratingBtns.addEventListener('click', (e) => { 
       const id = e.target.dataset.id; 
       console.log(id); 
       if (id) { 
         //remove active state from btns 
         eachBtns.forEach((btn) => { 
           btn.classList.remove('btn-active'); 
           e.target.classList.add('btn-active'); 
           textResult.innerHTML = `You selected <span class="result-number"> ${id}</span> out of 5`; //printing the selected value to result 
         }); 
       } 
     }); 
   }
  

  And also if the user didn't click on the rating btns the result card shouldn't open so add some code there to check if there is active btn ...

  Marked as helpful

  0

  ---

  

  Josh•320

  @Ao-chiPosted almost 2 years ago

  @yishak621 Hi!, I appreciate the tip! But It is my intention to make the other radio buttons active too like a usual star rating buttons (hope you picture out what I mean). Again Thanks!

  0

  

  yishak abrham•2,150

  @yishak621Posted almost 2 years ago

  @Ao-chi o ok i thought it was a bug 😀

  0