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 JavaScript and the DOM (Retiring) Traversing the DOM Child Traversal

ashique desai
ashique desai
3,662 Points
Posted by ashique desai
ashique desai
3,662 Points

For every paragraph element change the color to be blue. (Hint: remember, paragraphs contains a collection of elements

Hi there, Not able to solve this. Can someone guide me on this!

app.js 
const section = document.querySelector('section');
let paragraphs = section.children;
for (let i= 0; i < paragraphs.length; i ++) {
     paragraphs.style.backgroundColor ='blue';
     }
index.html 
<!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>

8 Answers

Eduardo Parra San Jose
Eduardo Parra San Jose
12,579 Points
Eduardo Parra San Jose
Eduardo Parra San Jose
12,579 Points

You're absolutely right. It is paragraphs[i].style.color ='blue'; I missed that one. Have a nice weekend :)

Eduardo Parra San Jose
Eduardo Parra San Jose
12,579 Points
Eduardo Parra San Jose
Eduardo Parra San Jose
12,579 Points

Hi,

I'll try to help. Your code looks great to pass the challenge, you've just forgotten to use the i variable to select the individual paragraphs. Instead of this:

 paragraphs.style.backgroundColor ='blue';

I guess what you want it was this:

 paragraphs[i].style.backgroundColor ='blue';

Then the code will be as follows:

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

I hope it helps. Many thanks. Have a nice day :)

ashique desai
ashique desai
3,662 Points
ashique desai
ashique desai
3,662 Points

Thanks a lot Eduardo again!

ashique desai
ashique desai
3,662 Points
ashique desai
ashique desai
3,662 Points

I tried as you had suggested : paragraphs[i].style.backgroundColor ='blue'; But the above code did not work.Then i tried the code below (Which Worked) : paragraphs[i].style.color ='blue';

Just mentioning, as it might help someone with this challenge.

Huseyin Erkmen
Huseyin Erkmen
11,268 Points
Huseyin Erkmen
Huseyin Erkmen
11,268 Points

That is true. Question doesn't ask for background color, only color.

Tashi D. Gyeltshen
Tashi D. Gyeltshen
10,636 Points
Tashi D. Gyeltshen
Tashi D. Gyeltshen
10,636 Points

This worked for me:

 const section = document.querySelector('section');
 let paragraphs = section.children;
 section.style.color ='blue';
Hassan Al-khalifah
Hassan Al-khalifah
7,130 Points
Hassan Al-khalifah
Hassan Al-khalifah
7,130 Points

Hey Ashique,

As the question asks to change the paragraph element color, then paragraphs[i].style.backgroundColor = 'blue'; will not function correctly in relation to the task requested.. Why, because this syntax would change the color of the paragraph element's background, but not the paragraph element itself as the task requests. Thus, use the following code: paragraphs[i].style.color = 'blue';. Basically remove the background syntax from the current syntax. This should do it.

Good luck!

John Norris
John Norris
21,145 Points
John Norris
John Norris
21,145 Points 
const section = document.querySelector('section');
let paragraphs = section.children;

for (let i = 0; i < paragraphs.length; i += 1) {
   paragraphs[i].style.color = 'blue';
}
Tom Evertzen
Tom Evertzen
9,750 Points
Tom Evertzen
Tom Evertzen
9,750 Points

I actually wanted to make the code a little easier by using a For of loop. But it is not working for me. I thought a for of loop should be possible since .children returns an array.

This is my code

const section = document.querySelector('section');
let paragraphs = section.children;

for (let par of paragraphs) {
  par.style.color = 'blue';
};
Daniel Mula Tarancón
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Daniel Mula Tarancón
Full Stack JavaScript Techdegree Graduate 37,873 Points
Daniel Mula Tarancón
.a{fill-rule:evenodd;}techdegree seal-36
Daniel Mula Tarancón
Full Stack JavaScript Techdegree Graduate 37,873 Points

Hi everyone! This is the answer that worked for me (there are more possibilities of course). But this is a possible answer that works. Always glad to help 😊:

var section = document.querySelector('section');
var paragraphs = section.children; 

for (let i=0; paragraphs [i] !== undefined; i++) {

paragraphs[i].style.color = 'blue';

}