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

Posted by Lizabeth Ketcham
Lizabeth Ketcham
1,627 Points

Can't satisfy q1 of this exercise.

Instructions: select all links in the nav element. code I used: let navigationLinks = document.querySelector('nav').querySelectorAll('li'); This correctly selects the 3 desired elements, though it uses a technique not yet covered in the course. I didn't figure out a more straightforward solution. I've seen the thread about making exercise solutions available - it's time!

js/app.js 
let navigationLinks;
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">About</a></li>
          <li><a href="contact.html">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>

1 Answer

andren
andren
28,558 Points
andren
andren
28,558 Points

The problem is that the challenge wants the link elements nested within the nav elements. Despite the name li is not a link element, it is a list item element. The link element in html is the a (anchor) element. If you change your selector from li to a then you will be able to pass onto task 2.

Also while your solution works (with the element corrected) it is a bit redundant. The querySelector/querySelectorAll methods allows you to select elements using CSS selectors. If you have taken any of the CSS courses you should have been introduced to a CSS selector called a descendant selector.

The descendant selector is one of the most basic CSS selectors and allows you to easily select elements that are nested within other elements. To use the selector you simply specify multiple elements separated by a space, the last element you specify will be selected but only if it is nested within the other elements you specified. So to select all a elements nested within nav elements you would type this:

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

The descendant selector can also be used with id and class selectors in place of plain tag selectors.

Umesh Ravji
Umesh Ravji
42,386 Points
Umesh Ravji
Umesh Ravji
42,386 Points

You left li in there :)

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

[Edited]

andren
andren
28,558 Points
andren
andren
28,558 Points

Argh I only left it in for about two minutes before editing it, I hoped no one noticed :). Oh well that's what I get for making the same mistake as the poster did.

Though while we are at pointing out minor mistakes in each other's posts, you use the querySelector method in your example. For this task you have to use querySelectorAll since multiple elements are being selected.

I guess that makes us even :smile:.

Umesh Ravji
Umesh Ravji
42,386 Points
Umesh Ravji
Umesh Ravji
42,386 Points

I never noticed, we even then :p