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

Spencer Mendoza
Spencer Mendoza
6,978 Points
Posted by Spencer Mendoza
Spencer Mendoza
6,978 Points

How do I use a loop to change the color of elements within a variable?

Whenever I run this code it says that task 1 is no longer passing (task one was to assign all the child elements of 'section' to the variable 'paragraphs'). I haven't even touched that code but it passes every time I go back.

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

for (i = 0; i < paragraphs.length; i += 1) {
  paragraphs[i].style.Color = '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>
Erick R
Erick R
5,293 Points
Erick R
Erick R
5,293 Points

Try to initialize the For loop variable i. 

for(let i = 0; i < paragraphs.length; i += 1) {
............
............
}
for( var i = 0; i < paragraphs.length; i += 1) {
.......................
................
}

Also apart from i not being initialized, style.color should be lower case as mentioned by Olga.

3 Answers

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

That message can be confusing until you know that any syntax error invalidates the entire script, so the re-checks of the previous tasks fail.

In this case, the syntax error is caused by a missing declaration (with "var" or "let") of the loop variable. The actual error was: "ReferenceError: Strict mode forbids implicit creation of global property 'i'"

You also have a spelling error where you wrote "Color" (with a capital "C") instead of "color" (lower case "c").

Olga DC
Olga DC
16,680 Points
Olga DC
Olga DC
16,680 Points

Hi Spencer. You have to write style.color all in small caps.

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

I think you meant "lower case". The term "small caps" is a visual effect that does not occur in code.

Olga DC
Olga DC
16,680 Points
Olga DC
Olga DC
16,680 Points

Sorry, I meant "lower case", as Steven says. Thank you for the correction! :)

Spencer Mendoza
Spencer Mendoza
6,978 Points
Spencer Mendoza
Spencer Mendoza
6,978 Points

thanks guys, I just had to initialize the i variable with 'let'. Color was capitalized because I had it set as 'backgroundColor' before I realized that wasn't what I was trying to do lol.