
Spencer Mendoza
5,934 PointsHow 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.
const section = document.querySelector('section');
let paragraphs = section.children;
for (i = 0; i < paragraphs.length; i += 1) {
paragraphs[i].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>
3 Answers

Steven Parker
116,121 PointsThat 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 Díaz Cerezo
14,236 PointsHi Spencer. You have to write style.color all in small caps.

Steven Parker
116,121 PointsI think you meant "lower case". The term "small caps" is a visual effect that does not occur in code.

Olga Díaz Cerezo
14,236 PointsSorry, I meant "lower case", as Steven says. Thank you for the correction! :)

Spencer Mendoza
5,934 Pointsthanks 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.
Erick R
5,291 PointsErick R
5,291 PointsTry to initialize the For loop variable i.
Also apart from i not being initialized, style.color should be lower case as mentioned by Olga.