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 Julien Arseneau
.a{fill-rule:evenodd;}techdegree
Julien Arseneau
Full Stack JavaScript Techdegree Student 5,200 Points

What is my error?

It says: ''There was an error with your code: ReferenceError: Can't find variable: paragrpahs.''

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

var ti;
for ( ti = 0; ti < paragrpahs.length; ti += 1) {
paragraphs.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>

3 Answers

Elijah Quesada
.a{fill-rule:evenodd;}techdegree seal-36
Elijah Quesada
Front End Web Development Techdegree Graduate 32,965 Points
  1. Its a good practice to use the letter i for "for" loops instead of "ti". Since you will be iterating through a node list.
  2. Since you're using a for loop you can declare the variable "i" in the for loop and not outside.
  3. If you want to iterate through all the paragraphs and style each one, you will want to add [i] so the for loops iterates through the child node list and applies color.
const section = document.querySelector('section');
let paragraphs = section.children;

  for  (let i = 0; i < paragraphs.length; i += 1) {
      paragraphs[i].style.color = 'blue'
}
Heidi Puk Hermann
Heidi Puk Hermann
33,366 Points
Heidi Puk Hermann
Heidi Puk Hermann
33,366 Points

You have a spelling error. You variable is called "paragraphs", but in your loop you write "paragraphs". Just correct the spelling and it should work.

Julien Arseneau
seal-mask
.a{fill-rule:evenodd;}techdegree
Julien Arseneau
Full Stack JavaScript Techdegree Student 5,200 Points
Julien Arseneau
.a{fill-rule:evenodd;}techdegree
Julien Arseneau
Full Stack JavaScript Techdegree Student 5,200 Points

Thanks to you two!