Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Boonsuen Oh
Boonsuen Oh
18,788 Points
Posted by Boonsuen Oh
Boonsuen Oh
18,788 Points

JS DOM code challenge help

I need a solution for this challenge. https://teamtreehouse.com/library/javascript-and-the-dom-2/traversing-the-dom/child-traversal

Steven Parker
Steven Parker
231,007 Points
Steven Parker
Steven Parker
231,007 Points

Please at least give it your best "good faith" try.

And then post your code here if you still need help.

If you're totally lost, you may want to re-watch the video.

Boonsuen Oh
Boonsuen Oh
18,788 Points
Boonsuen Oh
Boonsuen Oh
18,788 Points

Hi, I've tried it several times.

const section = document.querySelector('section');
let paragraphs = section.children;
section.nextElementSibling.chidren.style.color = 'blue';
paragraphs.style.color = 'blue';

And also the for loop method. What is the way to select all of the paragraphs and make changes to them?

1 Answer

Steven Parker
Steven Parker
231,007 Points
Steven Parker
Steven Parker
231,007 Points

:point_right: You can't assign properties to an entire collection of elements.

But you could use a loop to iterate through the collection and assign a property to each element individually.

Boonsuen Oh
Boonsuen Oh
18,788 Points
Boonsuen Oh
Boonsuen Oh
18,788 Points

Good news that I passed it! The solution I used:

const section = document.querySelector('section');
let paragraphs = section.children;
for (var i=0;i<paragraphs.length;i+=1) {
  paragraphs[i].style.color = 'blue';
}

This is kinda confusing though, the second challenge ask me "all the paragraphs", and the index.html includes two types of paragraphs, each under section and footer.

<!DOCTYPE html>
<html>
    <head>
        <title>Child Traversal</title>
    </head>
    <body>
        <section>
            <p>This is the first paragraph</p>
            <p>This is a slightly longer, second paragraph</p>
            <p>Shorter, last paragraph</p>
        </section>
        <footer>
            <p>&copy; 2016</p> 
        </footer>
        <script src="app.js"></script>
    </body>
</html>

Obviously the code I used to pass is just work for the paragraphs under section. What's your thought?