Interactive Rating Component

Community feedback

• 

  Filip Juszczak•690

  @filipjuszczakPosted 5 months ago

  Hi!

  You could use data attributes on your buttons and access the associated values in JavaScript rather than rely on innerHTML, like this:

  <button class="btn active" data-value="1">1</button>
  

  let value = e.target.dataset.value;
  

  You might also want to prevent user from submitting if they didn't select a rating - you could do that by adding a disabled attribute to the button with a default value of true and after the user selected a rating, set the attribute to false or in the submit event listener early return if rating was not selected (you would need an additional variable, e.g. selectedRating, to store that information), then use it in the handler:

  const selectedRating;
  
  submit.addEventListener("click", () => {
      if (!selectedRating) return;
      ...
  });
  

  Marked as helpful

  0

  ---

  

  Sameer Mandve•350

  @sameermandvePosted 5 months ago

  @filipjuszczak Thanks I will try to implement it!!

  0