Hey everyone! I just have two problems. My JS works, but the code itself is very repetitive I notice.(I don't know any JS libraries/frameworks yet) If someone has a way for me to simplify my code, I'll greatly appreciate it! My next problem is with the functionality of the rating buttons. So when I click on a number, it does what it's supposed to, but when I click on another number, they both turn the same color...Now this obviously isn't supposed to be happening, but I couldn't figure the JS out for it not to be repetitive, so again, I'll be more than happy if someone could help me with that! Overall, I'm hoping to get some feedback on the design itself, the HTML/CSS I used. Would anyone do anything different or more efficient to what I did (specifically for the HTML and CSS portion)
Daniel Ramírez
@danyrszzAll comments
- @jplawrenceSubmitted over 2 years ago@danyrszzPosted over 2 years ago
i have problems with my html semantics but i can help with the JS part:
you can add the same class to each one of your li elements, then do a querySelectorAll to assign each one of them to an array, then you can do two things: either add an eventlistener to the ul element (container) to manage each one of the li clicks, or add an event listener to each one of li elements, so that when you click you can have the exact clicked element and you'll be able to do something like "event.target.classList.add("selected") where selected will have the desired background color, then to remove the previous selected element you can at each click traverse the array and do something like "event.target.classList.remove("selected") for each li element.
This way you write the event just once and you can add as many elements as you like without having to touch the js.
That's kinda the way i did it, hope i made myself clear
Marked as helpful0
