JavaScript JavaScript and the DOM Traversing the DOM Child Traversal

Zachary Luke
Zachary Luke
7,873 Points

Trouble styling children of an element

(I swear I am so close to solving this!!) The goal is to style the children element of the 'section' container that the 'li' elements are in.

The error message I'm getting here is: "Cannot read property '1' of null."

What exactly is the '1 of null' part? All I can think of is the 1 in the loop function, and even then I'm stumped.

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

for (let i = 0; i < paragraphs.length; i += 1) {
    paragraphs.style.color('blue'[i]);
}
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; 2019</p> 
        </footer>
        <script src="app.js"></script>
    </body>
</html>

1 Answer