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

Posted by Cody Smith
Cody Smith
3,818 Points

Hey everyone, TreeHouse won't let me pass this quiz, even though i'm 99% sure i'm right? The code works, help please.

Hey every one, i'm at the link below at the end of the DOM coarse. I tested this code and it seems to change the P Elements to blue. However, it won't let pass the quiz. I tested the code and it works. Referencing the HTML below, TreeHouse said do this "On line 2 of app.js, get all the paragraph elements within section and assign them to the paragraphs variable." However after spending 30 minutes trying the while loop, for loop, maybe they want me to do it a specific way, which I don't think is fair because they didn't say do it a certain way. But it is just a program quiz:). Anway how can I tell the quiz the way it wants to a pass this step please. Thank you in advance if you can help.

Link: https://teamtreehouse.com/library/javascript-and-the-dom-2/traversing-the-dom/child-traversal

/*THIS IS THE CODE I USED BELOW THAT THE QUIZ WON'T ACCEPT

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

for (i = 0; i < paragraphs.length; i++ ) {

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

}

*/

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

for (i = 0; i < paragraphs.length; i++ ) {

  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>
Gustavo Winter
Gustavo Winter
Courses Plus Student 27,382 Points
Gustavo Winter
Gustavo Winter
Courses Plus Student 27,382 Points

Hello Cody Smith, your code is right, but you have a little mistake at the loop.

for (i = 0; i < paragraphs.length; i++ ) { //The "i" need to be  a variable, and must be declare
  paragraphs[i].style.color = "blue";
}

Like this:

for (let i = 0; i < paragraphs.length; i++ ) { //let i = 0 it's declare the variable i for you can use on the paragraphs[i]
  paragraphs[i].style.color = "blue";
}

It should work. By the way, great job, keep it up !

2 Answers

Cody Smith
Cody Smith
3,818 Points
Cody Smith
Cody Smith
3,818 Points

Thanks everyone, really appreciate it, all were helpful. This code ended up letting me pass the quiz in case you guys were curious.

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

for (let i = 0; i < paragraphs.length; i++ ) { //let i = 0 it's declare the variable i for you can use on the paragraphs[i] paragraphs[i].style.color = "blue"; }

Jacob Mishkin
Jacob Mishkin
23,118 Points
Jacob Mishkin
Jacob Mishkin
23,118 Points

You forgot to declare your index variable: let i = 0; in your for loop.

Khem Myrick
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Khem Myrick
Python Web Development Techdegree Graduate 18,701 Points
Khem Myrick
.a{fill-rule:evenodd;}techdegree seal-36
Khem Myrick
Python Web Development Techdegree Graduate 18,701 Points

Use "var" instead of "let" and it works. Using "let" causes task 1 (passing all the p elements in the section element into the paragraphs variable) to fail. Someone better at JS than me will have to explain why.

Jacob Mishkin
Jacob Mishkin
23,118 Points

Var is fine, but its a good idea to start using es6 syntax. By using let you allow the variable to be looped over and used in your for loop. Mostly the reason using let, const instead of var is for scoping issues you will run into.