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

Spencer Mendoza
Spencer Mendoza
6,978 Points
Posted by Spencer Mendoza
Spencer Mendoza
6,978 Points

Cannot figure out how to select the right links in this code challenge

Whenever I run this code it says that it is returning three links instead of two and I'm not sure what I'm doing wrong.

js/app.js 
let navigationLinks = document.querySelectorAll('nav > ul > li > a');
let galleryLinks = document.querySelectorAll('gallery a');
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" id='bob'>
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg" id='bob'>
              <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>
Stipe Stipic
Stipe Stipic
17,520 Points
Stipe Stipic
Stipe Stipic
17,520 Points

You have make all right, but only in the second task you have forgotten the "#" sign to select an element by id. let galleryLinks = document.querySelectorAll('#gallery a');

Matt Brock
Matt Brock
28,330 Points

Hey Stipe, add your comment as an answer so Spencer can mark it as the 'Best Answer'!

1 Answer

Stipe Stipic
Stipe Stipic
17,520 Points
Stipe Stipic
Stipe Stipic
17,520 Points

You have make all right, but only in the second task you have forgotten the "#" sign to select an element by id. let galleryLinks = document.querySelectorAll('#gallery a');

Spencer Mendoza
Spencer Mendoza
6,978 Points
Spencer Mendoza
Spencer Mendoza
6,978 Points

Thanks! I figured I would be forgetting something simple lol