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

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Posted by Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Am I overcomplicating this?

I have some code here for task 2 that isn't passing. We're supposed to change all children elements to the colour blue, so all the paragraph children of the section element.

But it comes up as not passing task 1.

So I tried looping through the paragraphs using the same technique as the video.

Any ideas?

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

function changeToBlue() {
  paragraphs.style.color = "blue";
}

for (i=0; i < paragraphs.length; i++) {
 changeToBlue(paragraphs[i]);
}
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>

2 Answers

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

:point_right: You have some issues, but the message may be misleading.

Your task 1 solution is still good, but the other issues are making the entire JavaScript invalid.

You created a loop in which you pass each paragraph to your changeToBlue function (good idea!), but the function itself isn't designed to take an argument. You probably want to modify the function to take a paragraph argument and apply to color to it.

Also, while it's not obvious from the provided code, challenges are evaluated in JavaScript's "strict" mode. One limitation of strict mode is that you're not allowed to assign variables that have not been defined. So your loop will need a "var" or "let" as part of the initialization clause.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Okay, so I was able to finish the challenge with this code...

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

for (let i=0; i < paragraphs.length; i++) {
 paragraphs[i].style.color="blue";
}

But this one fails every time

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

function changeToBlue(p) {
 let p = paragraphs.style.color = "blue";
}

for (let i=0; i < paragraphs.length; i++) {
 changeToBlue(paragraphs[i]);
}

With a communications error. Is the code so bad the challenge won't even look at it? ;)

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

In your second example, the p parameter is storing each of the paragraphs so you would want to access the style property directly off each paragraph.

p.style.color = "blue";
Chris Drew
Chris Drew
5,919 Points
Chris Drew
Chris Drew
5,919 Points

This code worked.

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

for (let i = 0; i < paragraphs.length; i++) {
    paragraphs[i].style.color = "blue";
}

I took the "paragraphs" variable, and used it within the for loop, then iterated through each child with [i].