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
Christopher Bate
4,736 PointsHuh?
It is saying that task 1 no longer passes. When I go back to task 1 it passes fine?
const section = document.querySelector('section');
let paragraphs = section.children;
for (var p in paragraphs){
p.style.color = 'Blue';
}
<!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>© 2016</p>
</footer>
<script src="app.js"></script>
</body>
</html>
2 Answers
Juan Pablo Pinto Santana
15,719 PointsHi!
The kind of loop you're using is only for iterating the enumerable properties of an object. In this case, the object is a HTMLCollection object. To access the elements (only the paragraphs) contained in that object (which are also properties of the object, but the keys for these properties are numerical strings):
for (var i = 0; i < paragraphs.length; i++) {
paragraphs[i].style.color = 'blue';
}
Angelica Hart Lindh
19,465 PointsES2015 syntax with Array.forEach and Arrow Function for iterating through items of an Array or NodeList:
const section = document.querySelector('section');
let paragraphs = section.children;
paragraphs.forEach(paragraph => paragraph.style.color = 'blue')