Interactive rating component using Javascript

Community feedback

• 

  calvinvin•790

  @calvinvinPosted 3 months ago

  Works well!

  For event delegation to add event listener on buttons 1~5, the following would work for your codes:

  const divButtons = document.getElementById("no-btn");
  const buttonIdList = ['one', 'two', 'three', 'four', 'five'];
  
  divButtons.addEventListener("click", function(event) {
  if ( buttonList.includes(e.target.getAttribute("id") ) {
      ......;
    }
  })
  

  But I think event delegation wound not be needed if using React library?

  To make the codes better, use native html element would enhance semantics and accessibility. For example, replace the <div id="one"> with <button id="one">. In this challenge scenario, I think make it a form and assign the buttons 1~5 with <input type="radio" name="score" value="1"> and use the submitted button to submit the form would be even better. By using <input>, it is also easier to style the selected button (score 1~5) by using CSS input:checked pseudo-class selector.

  Marked as helpful

  0

  ---

  

  Michael-Alans•300

  @Michael-AlansPosted 3 months ago

  @calvinvin Thanks so much, I really appreciate your correction

  0