Design comparison
Solution retrospective
How can I improve the Javascript code. I tried to select all the buttons with document.querySelectorAll() and loop trough them. I had trouble making a single button active while restricting the others.
Community feedback
- @Enmanuel-Otero-MontanoPosted about 2 years ago
Hello Aurel!
I am going to leave you your code modified to achieve the same functionality but with a for loop and using the querySelectorAll as you had in mind. I just added the loop and removed the listener events for the buttons and also removed the buttons that were located by the "id"
const submitBtn = document.getElementById('submitBtn'); const cardItems = document.querySelector('.card-items'); const cardThankYou = document.querySelector('.card-thank-you'); const ratingButtons = document.querySelectorAll('.card-thank-you'); submitBtn.disabled = true; submitBtn.onclick = () => { cardItems.style.display = 'none'; cardThankYou.style.display = 'flex'; }; const allBtns = document.querySelectorAll('.ratingBtn'); const span = document.getElementsByTagName('span')[0]; for (let btn of allBtns) { btn.addEventListener('click', () => { span.innerHTML = btn.innerHTML; submitBtn.disabled = false; }); }
I would like you to try it and tell me if it works correctly for you.
Cheers!
Marked as helpful2@Enmanuel-Otero-MontanoPosted about 2 years ago@Aur71 Looks to me like you're going to have to remove the classes to remove the button colors, add that.
0 - @k-stopczynskaPosted about 2 years ago
Hi!
According to your question: select them by const buttons = document.querySelectorAll('.buttons-class'). You will get the Node-list of them. Add event listener to all of them and write a function which on the click:
- removes class active from all the buttons
- on the button that is an event target will add class active
- will provide data for your span dynamically, e. g
const spanValue = e.target.innerContent;
and then you can use it like this
${spanValue}
You can also check my solution with different approach. Hope this helps:)
You did very good on the layout!
Happy coding!
Marked as helpful1@Aur71Posted about 2 years ago@k-stopczynska Thanks, it was so obvious yet i didnt think of this :)
0
Please log in to post a comment
Log in with GitHubJoin 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