@VenusY
Posted
I'm posting this as a separate comment and not a reply in case you find this helpful.
After clicking a rating button, it turns a lighter grey, which indicates that the user has selected that rating. This is fine and expected.
However, clicking off the button causes it to go back to its default styling, which suggests that it's no longer selected, but pressing the submit button will cause the page to proceed to the 'thank you' page with that rating anyway.
I see you have an event listener that changes the innerHTML of the rating message on the 'thank you' page when the user clicks on a rating button:
rates.forEach((rate) => {
rate.addEventListener("click", () => {
rating.innerHTML = rate.innerHTML;
});
});
I suggest listening for a click outside of a rating button (and also not on the submit button) to reset the rating.innerHTML back to "" to make the functionality of the page more intuitive.
Alternatively, you could make it so that the button does not appear to lose focus upon clicking off it, which might be an easier approach.
Hope this helps! :)
Marked as helpful
@VenusY
Great catch! 🤩 Constructive comment!👍 Thank you! 🫶
@VenusY
I couldn't think of a way to turn off un-focus only when someone clicks out of the button array. I figured I would track button selection through .button--selected:
.button--selected,
.button--ghost:focus {
color: var(--color-neutral-100);
background-color: var(--color-neutral-500);
}
I clear the button selection first and then add .button--selected to the clicked button.
rates.forEach((rate) => {
rate.addEventListener("click", () => {
clearRatings();
rate.classList.add("button--selected");
rating.innerHTML = rate.innerHTML;
});
});
...
const clearRatings = () => {
rates.forEach((rate) => {
rate.classList.remove("button--selected");
});
};
It works as expected. Thanks again for the time you took to review my code! 🙏
@VenusY
Posted
@solvman No problem! Glad I could help you out, and great job on figuring out a solution for this issue. :)
