HTML & SCSS and basic JS for Hide/Show answer to a question.
Design comparison
Solution retrospective
Hello, i am a newbie to JS. So i wrote the most basic Js code off all time)) Anyway, if you have any feedback about my solution please leave a comment.
Community feedback
- @SasaVaticPosted over 3 years ago
You could use forEach method to avoid duplicate code like this:
button.forEach((btn, index) => btn.addEventListener('click', function() { box[index].classList.toggle("text-visible"); box[index].classList.toggle("text-hide"); head[index].classList.toggle('bold-text'); }));
so foreach btn in button node list you can access btn element and its index and add click event to it and use index argument to access box and head node list elements with same index as btn which is clicked. I think it will also be better when you use querySelectorAll to use words in plural buttons, boxes, heads for naming your variables. Sorry for bad english, hope it helps.
Marked as helpful1@Andrii-RohovPosted over 3 years ago@ProtivProliv ohh right! it is super helpful)i totally forgot about forEach. I learn js fundamentals but when it comes to implement them i just can't figure it out. And variables names was from version #1 of my code) and it start to work only in ver. #5 or smth. But anyway, thanks a lot 👍
1
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