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 Interactive Web Pages with JavaScript Traversing and Manipulating the DOM with JavaScript Traversing Elements

Posted by Andrea Sorrell
Andrea Sorrell
4,736 Points

Need hint or answer to challenge question.

Take a look around the html and js files. Line 5 of app.js is incorrect. listItems should be the children of the navigation unordered list.

This is what I have for line 5

var listItems = navigation.querySelector("li");

I am unsure of the right way to denote selector in parenthesis. When I submit I am asked "Did you use the .children property?

11 Answers

Hugo Paz
Hugo Paz
15,622 Points

var listItems = navigation.children;

Andrea Sorrell
Andrea Sorrell
4,736 Points

Thanks Hugo. Weird I don't remember going over .children in the video. It worked but it seems to break when I move onto challenge 2.

Challenge task 2 of 2 ask:

On line 14 of the app.js, we want to get the anchor (the a element) from inside the listItem. Use a method to traverse and select the anchor.

It says task one no longer works when I add .querySelector(a) to line 14. any idea why?

var anchor = listItems.querySelector(a);

this is the everything from challenge

//Select the naviagation
var navigation = document.getElementById("navigation");

//Select all listItems from the navigation
var listItems = navigation.children;

//When a navigation link is pressed
var linkListener = function() {
  console.log("Listener is clicked!");
}

var bindEventsToLinks = function(listItem) {
  //Select the anchor
  var anchor = listItem.querySelector(a);
  //Bind the linkListener to the anchor element (a) 
  anchor.onclick = linkListener;
}

for(var i = 0; i < listItems.length ; i++) {
    bindEventsToLinks(listItems[i]);
}
Hugo Paz
Hugo Paz
15,622 Points

Try var anchor = listItems.querySelector("a");

Rene Katsev
PLUS
Rene Katsev
Courses Plus Student 3,621 Points
Rene Katsev
Rene Katsev
Courses Plus Student 3,621 Points

Hey Blake u are missing the quotes around the "a" should be -> 

var anchor = listItem.querySelector("a");
Zeljko Maric
Zeljko Maric
8,524 Points
Zeljko Maric
Zeljko Maric
8,524 Points 
var anchor = listItem.querySelector("a");

doesn't work. Any ideas why? It sends me back to task 1 and gives the following error:

There was an error with your code: TypeError: 'undefined' is not a function (evaluating 'listItems.querySelector("a")')

Hugo Paz
Hugo Paz
15,622 Points

Hi Zeljko,

I tried 

 var anchor = listItem.querySelector("a");

and it worked.

From your error message it is evaluating listItems instead of listItem, maybe a typo?

Zeljko Maric
Zeljko Maric
8,524 Points

Yes, now it worked, Hugo! Thanks!

imtrying
imtrying
19,943 Points
imtrying
imtrying
19,943 Points

In case someone else need the answer make sure you add a space after the quote::

like this (" a ");

MUZ140875 Joseph Chivasa
MUZ140875 Joseph Chivasa
7,758 Points
MUZ140875 Joseph Chivasa
MUZ140875 Joseph Chivasa
7,758 Points

This is wat i did ........var listItems=navigation.children; n i got it right

Prashant chaudhari
PLUS
Prashant chaudhari
Courses Plus Student 24,499 Points
Prashant chaudhari
Prashant chaudhari
Courses Plus Student 24,499 Points

correct code.

var navigation = document.getElementById("navigation");

//Select all listItems from the navigation var listItems = navigation.children;

//When a navigation link is pressed var linkListener = function() { console.log("Listener is clicked!"); }

var bindEventsToLinks = function(listItem) { //Select the anchor var anchor = listItem; //Bind the linkListener to the anchor element (a) anchor.onclick = linkListener; }

for(var i = 0; i < listItems.length ; i++) { bindEventsToLinks(listItems[i]); }

Tanyaradzwa Anesu Mukondiwa
Tanyaradzwa Anesu Mukondiwa
18,350 Points
Tanyaradzwa Anesu Mukondiwa
Tanyaradzwa Anesu Mukondiwa
18,350 Points

ar anchor = listItem.querySelector("a");

Ishan Vyas
Ishan Vyas
30,284 Points
Ishan Vyas
Ishan Vyas
30,284 Points

var anchor = listItem.querySelector("a");

Larry Singleton
Larry Singleton
18,946 Points
Larry Singleton
Larry Singleton
18,946 Points

This confused the heck out of me, this is what worked for me. //Select the naviagation var navigation = document.getElementById("navigation");

//Select all listItems from the navigation var listItems = navigation.children;

//When a navigation link is pressed var linkListener = function() { console.log("Listener is clicked!"); }

var bindEventsToLinks = function(listItem) { //Select the anchor var anchor = listItem.querySelector("a"); //Bind the linkListener to the anchor element (a) anchor.onclick = linkListener; }

for(var i = 0; i < listItems.length ; i++) { bindEventsToLinks(listItems[i]); }

Blake Jackovitch
Blake Jackovitch
6,688 Points
Blake Jackovitch
Blake Jackovitch
6,688 Points

I'm having a bit of trouble on this as well, unsure as to what is desired here.

michaelmclaughlin3
PLUS
michaelmclaughlin3
Courses Plus Student 5,092 Points
michaelmclaughlin3
michaelmclaughlin3
Courses Plus Student 5,092 Points

Make sure you add '' around the a element