Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Interactive rating with javascript, HTML and CSS

@JvModesto1

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello guys, have one bug in the project, that is, if you select one number(like the number 3 for the rating) and after that you select other number (like the 5) and submite for the thank you mensage, in the part of the message appear a message for every number you select... anyone knows how to fix it?

Community feedback

@afrataiza

Posted

Oi João, td bem? Acredito q vc pode adicionar um eventListener nos span e aplicar uma condição que quando clicar em um número se ja houver algum dos números selecionados remove o selected dele e adiciona essa class no q está sendo clicado. Ou se preferir pode adicionar input do tipo radio. Mas ai teria q mudar um pouco sua logica. Mas sinceramente acho mais simples usar os inputs.

0
Loo_cee 230

@Loocee

Posted

Hi Modesto, well done in completing this challenge. Now to get you JS to execute properly, you don't need to tap into the data rate attribute, infact i think it's not even needed in your HTML or JS. To get the value of the button selected, you just need to use the .innerHTML() method and you'll be able to tap into the value and then use conditions e.g if .... (innerHTML === 2) { div.innerHTML() = you selected 2out of 5}

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord