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

James McDonough
James McDonough
15,618 Points

Bummer! Not all of the paragraphs text colors have been changed to blue progamatically

This challenge is unclear about which skills from the previous videos it is testing. I don't think I selected the paragraph elements correctly, or changed their styles correctly. Or maybe I didn't run the function? Any way it is, it keeps giving me this error or the DREADED "Oops! Looks like Task One is no longer passing" error that might make me drop out of Treehouse.

Also: how do I access the question board for a challenge without asking a question first"

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

function turnBlue(p) {
 let ps = document.getElementsByTagName("P"); 
 for (let i = 0; i < p.length; i += 1)
   if (i = ps) {
    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>

2 Answers

Hi! You actually sort of have the solution in your code, you just went a little overboard with it, by adding unnecessary lines of code.

The challenge wants you to change every paragraph's color to blue. In order to go through all paragraphs, you need to use a FOR loop.

Then, in order to attach the color to each paragraph, you need to add the index [] brackets to the variable, so each paragraph the FOR loop goes through receives the desired color.

Here's the code:

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

for (var i = 0; i < paragraphs.length; i += 1) {
  paragraphs[i].style.color = 'blue';
}

Good luck!

Steven Parker
Steven Parker
231,268 Points

You don't need a function for this challenge. But since you already defined one, you can call it; but be sure to pass the argument "paragraphs" to it.

Then, you have a few other issues:

  • the "if" has an assigment operator ("-") instead of an equality test ("==")
  • you don't need an "if" at all since you want to change every paragraph
  • it's not the index ("i") that you want to change, but the paragraph at that index ("p[i]").