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 JavaScript and the DOM (Retiring) Getting a Handle on the DOM Practice Selecting Elements

Marco Aurélio Angioluci
Marco Aurélio Angioluci
1,507 Points

How should I select only the child <li> elements inside the parent node <nav>?

I'm having trouble getting to select only the 3 <li> elements that are inside the <nav> tag. And I don't know what I'm doing wrong.

let navigationLinks = document.getElementsByClassName('selected'); let galleryLinks; let footerImages;

My code get me just one result and I don't know why because I set to "selected" the classes of all the 3 <li> elements in the index.html file.

Also, the different codes that I tried got me 5 results (all the 5 <li> tags of the document).

But the correct is to get only the 3 <li> elements inside the <nav> tag.

Can anybody help me fix this?

js/app.js
let navigationLinks = document.getElementsByClassName('selected');
let galleryLinks;
let footerImages;
index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html" class="selected">About</a></li>
          <li><a href="contact.html" class="selected">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in Photoshop.</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2016 Nick Pettit.</p>
      </footer>
    </div>
  <script src="js/app.js"></script>
  </body>
</html>

2 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! First, and foremost, the challenge is not asking you to select the <li> tags, but rather the links. Remember, links are denoted by the <a> or anchor tag. You should not alter the HTML in any way. Altering the HTML could cause the challenge to fail.

There are a couple of ways to accomplish this. You could either use a CSS selector inside a querySelectorAll(), which would be the fastest. But to accomplish this you will need to have prior knowledge of CSS selectors. I can however give you a hint here. In CSS if I wanted to select all h2 elements within the <main> tag, I could pass in the CSS selector main h2 to a querySelector like so: querySelectorAll('main h2').

Alternatively, you could create an extra variable to hold the nav element and then retrieve all the <a> tags from within it. A slightly more elegant option (without using querySelectorAll) would be to chain those selections.

let navigationLinks = document.getElementsByTagName('nav')[0].getElementsByTagName('a');

This line will first get a collection of all tags named "nav" and then chooses the first one from within that. Since the nav on this page is the only one there, this will work fine. Then we can chain another getElementsByTagName to retrieve all the anchor tags.

As you can see, there are a number of solutions to this problem and I hope at least one of them helps you! :sparkles:

Marco Aurélio Angioluci
Marco Aurélio Angioluci
1,507 Points

Hi Jennifer! Thanks A LOT for your help. I feel like I have commited all possible errors in this exercise.

I understood your ideas and applied them to slightly change my last attempt and it worked immediately! What I did was:

let navigationLinks = document.querySelectorAll('nav a');

I was mistakenly getting the <li> tags. Now I'm taking the <a> tags. Also, I was referencing incorrectly the tags inside the querySelectorAll element, because I was separating both tags with a comma ("nav, a") while it should just be a space ("nav a").

Then I tried to apply your other suggestion (the elegant one) to Question 2, like this:

let navigationLinks = document.querySelectorAll('nav a');
let galleryLinks = document.getElementById('gallery')[0].getElementsByTagName('a');

I'll share what happened to me because it may help other students:

Apparently that piece of code was working for Question 2, but then I received the following message: "Oops! It looks like Task 1 is no longer passing". And this message appeared even when I just used the new solution too:

let navigationLinks = document.getElementsByTagName('nav')[0].getElementsByTagName('a');
let galleryLinks = document.getElementById('gallery')[0].getElementsByTagName('a');

I was intrigued and came back to Question 1. Both ways of solving worked fine.

Then I discovered my mistake in this line:

let galleryLinks = document.getElementById('gallery')[0].getElementsByTagName('a');

Since getElementById returns only a single element, and not an array of elements, I shouldn't use the [0] position specifier. I took it out and the code then worked well finally.

Then, I moved confident to Question 3, and wrote the following mistaken code:

let navigationLinks = document.querySelectorAll('nav a');
let galleryLinks = document.getElementById('gallery').getElementsByTagName('a');
let footerImages = document.getElementsByTagName('footer').getElementsByTagName('img');

I couldn't believe that it was not working. BUMMER! In despair, I just corrected it like this:

let navigationLinks = document.querySelectorAll('nav a');
let galleryLinks = document.getElementById('gallery').getElementsByTagName('a');
let navigationLinks = document.querySelectorAll('footer img');

And it worked! I felt relieved that at least one part of my new knowledge was working. Then, suddenly I got why the former code didn't work. It was because I used the getElementsByTagName without specifying the [0] position.

Finally, I did all the three questions again, to make sure I could reproduce them with no error. Everything went fine with this code:

let navigationLinks = document.querySelectorAll('nav a');
let galleryLinks = document.getElementById('gallery').getElementsByTagName('a');
let footerImages = document.getElementsByTagName('footer')[0].getElementsByTagName('img');

This challenge was really a good challenge for me. I hope that I can retain this knowledge now and that I don't make the same mistakes again.

Once again, thank you a lot for your precious help Jennifer!

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Marco Aurélio Angioluci you're a rock star! :smiley: That's amazing. No, seriously, learning to debug code is somewhat of an artform and you just took a giant leap forward. I'm only glad that I was able to help :sparkles:

Marco Aurélio Angioluci
Marco Aurélio Angioluci
1,507 Points

Thank you a lot, Jennifer Nordell ! ;) I'm glad I had your help. It was key, and very comprehensive!