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

Michael Paccione
Michael Paccione
9,017 Points
Posted by Michael Paccione
Michael Paccione
9,017 Points

Javascript Selectors

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.

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

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

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

var anchor = listItem;

I am not too good with Javascript but I would do something like...
var anchor = document.body("li > a"); 

Don't know if that would work but makes sense to me...


but team treehouse always have specific ways of doing it
How should this be?

2 Answers

Gabriel Tartaglia
Gabriel Tartaglia
41,581 Points
Gabriel Tartaglia
Gabriel Tartaglia
41,581 Points

Hi Michael!

In the first task of this code challenge you use the property children of navigation to get listItems correctly, right? Well, it returns an HTMLCollection, with elements in it,take a look at the documentation.

With that said, the listItem in line 14 is a element object. The element object has a method called querySelector that accepts one parameter, the selector! Take a look at the documentation in the Element Object and the querySelector method and try again, if you want the answer for the challenge, here it is:

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

Give me a touch if I was not clear enough, english is not my first language!

Michael Paccione
Michael Paccione
9,017 Points
Michael Paccione
Michael Paccione
9,017 Points

Wow, I'm surprised your English is excellent!

In reference to the code - thank you. I tried using querySelector for the first task and finally got it with children. I should have got this on my own but sometimes It's frustrating to know when to use what.

Thank You again =)

Gabriel Tartaglia
Gabriel Tartaglia
41,581 Points
Gabriel Tartaglia
Gabriel Tartaglia
41,581 Points

Wow, thanks Michael!

It's totally understandable, I always find myself in a situation like that. I recommend you to take a look at the documentation and, of course, share your question here in the forum.

You can always give me a touch, gonna be a pleasure help you again!