Interactive Rating Component

Community feedback

• 

  David•8,000

  @DavidMorgadePosted over 2 years ago

  Hi!, congrats on finishing the challenge, I think I can have the answers to your questions.

  1- You are probably not getting the correct output on Chrome, because you are using onclick directly on your html, this is a bad practice and should be avoid, because, it can cause buggy behaviours like this one, also you are already calling the "getValue()" function in a foreach on the buttons array, so it should already work if you remove de onclicks from your html.

  2 - For this in your submitFunction function, you can use an if check for the number, if there is no selected number you can just simply return and the code will stop, or add an alert or some css styles that warning that the user needs to select a number before submitting.

  For example:

  function submitFunction() {
    const starRating = document.getElementById('rating');
    if (starRating.textContent <= 0) return alert('You need to select a rating!');
    ratingStartContainer.style.display = 'none';
    tyStartContainer.style.display = 'block';
  }
  

  Hope it helps and fixes your problems!

  Marked as helpful

  1

  ---

  

  Veronica Orozco•280

  @VLOrozcoPosted over 2 years ago

  @DavidMorgade Everything is working now!

  Thank you for letting me know about the onclick being bad practice, I will be sure to call it from my javascript file from now on. Is it okay if my submit button keeps the onclick feature? or should I be calling it from the main.js?

  Many thanks for taking the time to help me with this, I look forward to reviewing and learning from your projects! ~V

  1

  

  David•8,000

  @DavidMorgadePosted over 2 years ago

  @VLOrozco is a general bad practice, you should add a listener in your JS and call the function from there.

  I'm happy that I could help you with my answer !

  Marked as helpful

  1