notifications-page-main with HTML and SCSS, FLEXBOX and JAVASCRIPT
Design comparison
Solution retrospective
Hello, The javascript that I wrote doesn't work. Please if you know more javascript, let me know or put a solution here. Thanks
Community feedback
- @pertrai1Posted over 1 year ago
Great work on the solution you have come up with.
Check in your JS and notice that you are using
querySelector
for theselected-tab
, but there are multiple elements in the DOM that have this class. Because of this you will need to usequerySelectorAll
and then loop over each of them to add the classinactive
. See if that helps get you going in the right direction.Marked as helpful0@codeguy9Posted over 1 year ago@pertrai1 Thanks for the feedback; How can I loop over each of them?
0@pertrai1Posted over 1 year ago@codeguy9
You have a couple options:
- You can use
forEach
- https://developer.mozilla.org/en-US/docs/Web/API/NodeList - You can turn into an array and then use the available array methods. To turn into array, you can use
Array.from(document.querySelectorAll(...))
or[...document.querySelectorAll(...)]
.
To me, it seems like the logic would be to take the single selector that is in the callback of the click handler you have, and loop over to add the class to the selector.
If this does not get you to the solution, you can post back here and tell me where you get stuck.
1 - You can use
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