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

David Quiroz
David Quiroz
3,510 Points
Posted by David Quiroz
David Quiroz
3,510 Points

I believe this challenge is broken: Next, change the color of each child paragraph to blue.

i have the following code. the following code should work. var section = document.querySelector('body > section'); var paragraphs = section.children;

for (let i = 0; paragraphs.length; i ++) { paragraphs[i].style.background = 'blue'; }

I am served the following error: Cannot read property [i] of null

app.js 
var section = document.querySelector('body > section');
var paragraphs = section.children;

for (let i = 0; paragraphs.length - 1; i += 1) {
 paragraphs[i].style.background = '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; 2019</p> 
        </footer>
        <script src="app.js"></script>
    </body>
</html>
David Quiroz
David Quiroz
3,510 Points
David Quiroz
David Quiroz
3,510 Points

my belief is that this is happening because the document that contains the above html is located in a nested document, which is only displayed after clicking 'preview'

2 Answers

Robert Manolis
STAFF
Robert Manolis
Treehouse Guest Teacher
Robert Manolis
Robert Manolis
Treehouse Guest Teacher

Hi David Quiroz, it looks like the problem has to do with your loop condition expression. You don't really have one currently. In your example, you have this:

(let i = 0; paragraphs.length - 1; i += 1)

But what you need is something like this:

(let i = 0; i < paragraphs.length; i += 1)

That should do it. :thumbsup:

David Quiroz
David Quiroz
3,510 Points
David Quiroz
David Quiroz
3,510 Points

Thank you Robert Manolis ! appreciate the help

Daniela Garcia
Daniela Garcia
5,071 Points
Daniela Garcia
Daniela Garcia
5,071 Points

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

for (let i = 0; i < paragraphs.lenght; i += 1) { paragraphs[i].style.backgroundColor = 'blue'; };

I'm confused why I get this error: Bummer: Make sure to change the text color of all paragraphs to blue.