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

Ismael Sanchez
Ismael Sanchez
2,884 Points
Posted by Ismael Sanchez
Ismael Sanchez
2,884 Points

How to detect only certain elements and omit others.

I am having trouble understanding how parse information using document.querySelectorAll(). I keep finding more than expected and can not pass this challenge.

js/app.js 
let navigationLinks = document.querySelectorAll('nav ul li a');
let galleryLinks= document.querySelectorAll('ul.gallery');
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>

6 Answers

pooya tolideh
pooya tolideh
12,184 Points
pooya tolideh
pooya tolideh
12,184 Points

This is happening because you need to select the anchor tags, not ul tags.

querySelectorAll('#gallery') selects all <ul> nodes with id of 'gallery' not what's inside them.

so you either need to loop through the array and get the <a> nodes inside, OR even simpler, use the following command:

let galleryLinks = document.querySelectorAll('#gallery a');
Scott Laughead
Scott Laughead
12,750 Points
Scott Laughead
Scott Laughead
12,750 Points

You have a ul element with the ID of 'gallery', yet you are trying to find an element with the class name of 'gallery' in your JavaScript.

Either change your HTML to:

<ul class="gallery">

or your JavaScript to 

let galleryLinks= document.querySelector('#gallery');
Ismael Sanchez
Ismael Sanchez
2,884 Points
Ismael Sanchez
Ismael Sanchez
2,884 Points

Scott Laughead I am looking for an ID if you look at the HTML so your advice is inacurate.

Scott Laughead
Scott Laughead
12,750 Points
Scott Laughead
Scott Laughead
12,750 Points

Yes, your HTML says ID, your JavaScript says class.

Ismael Sanchez
Ismael Sanchez
2,884 Points
Ismael Sanchez
Ismael Sanchez
2,884 Points

Scott Laughead Implementing that still did not help resolve the problem. It continues to say that I have three links instead of the necessary two. I apologize for insinuating that you did not know what the problem was.

Scott Laughead
Scott Laughead
12,750 Points
Scott Laughead
Scott Laughead
12,750 Points

You should probably post the challenge question as well. querySelectorAll gets all 'a' elements in the unordered list in your navigation. Therefore, the galleryLinks variable is an array of three elements- the Portfolio, About and Contact links.

There is a :not() pseudo-selector that would allow you to exclude certain elements. So if you wanted to exclude the element with the class of 'selected' you would change your code to this:

let navigationLinks = document.querySelectorAll('nav ul li a:not(.selected)');

I don't know if that is out of the realm of this lesson though.