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

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;

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

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

var anchor = listItem.querySelector("a");
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!

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

like this (" a ");

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

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]); }


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

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

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]); }

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

Make sure you add '' around the a element