JavaScript JavaScript and the DOM Traversing the DOM Child Traversal

Robert Ciuruś
Robert Ciuruś
Front End Web Development Techdegree Graduate 13,259 Points

Cannot read property '1' of null

Hey, I'm having a problem I can't quite resolve, my code isn't working and I'm not able to find out why, despite trying different approaches :( Could someone explain what am I doing wrong? Thanks!

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

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

2 Answers

KRIS NIKOLAISEN
PRO
KRIS NIKOLAISEN
Pro Student 51,979 Points

I received a different message in the console:

TypeError: paragraphs[i].style.color is not a function

to fix this it should be

paragraphs[i].style.color = 'blue'
Robert Ciuruś
Robert Ciuruś
Front End Web Development Techdegree Graduate 13,259 Points

Thank you for the answer! Just figured this out a second ago after 20 minutes of trying different ways haha

Piotr Manczak
Piotr Manczak
Front End Web Development Techdegree Graduate 20,874 Points

Pay attention to the last line of your code:

var section = document.querySelector('section');

var paragraphs = section.children;

for ( var i=0; i<paragraphs.length; i ++ ) {

paragraphs[i].style.color = 'blue'; }