Design comparison
Solution retrospective
// If i click the grade, this grade will show up on modal page btn1.addEventListener('click', function() { btn1.style.backgroundColor = 'hsl(25, 97%, 53%)';
// showing up on modal page by creating button tag.
const desc = document.createElement('button');
desc.innerText = 'You selected 1 out of 5';
ratingdesc.appendChild(desc);
There is one thing i can't solve by myself, when i click same grade twice or more, text i created 'You selected ~' shows up again and again.
And of course it doesn't remove as i click other grades.
I googled to solve it, but i have no idea how can i do ;(
Im looking for some good advices, thanks!
Community feedback
- @chinaza-SommiePosted over 1 year ago
Hello Min, Hope your are good. Your code is quite cool but I noticed that there was an issue when you click on submit.
This is the solution to the issue:
- Remove the line of code that creats a button in each of the btn. I think that is lines 224, 240, 254, 268 and 282. Write it in the general scope so that it would be one button. Adding the create button in each of those oclick event handlers would create a button for each button you click. Therefore making it one button outside of the onclick functions would create one button and then when you click on any button it would append to that one button which you created in the general scope. NB : Add it after you have created the btn5 constant. Like this:
const btn5 = document.querySelector('.five'); const desc = document.createElement('button');
Please do reach to me to let me know if this solves the issue. Happy coding!
0
Please log in to post a comment
Log in with GitHub
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