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 Chris Yarbrough
Chris Yarbrough
244 Points

Javascript and the DOM task 2 of 3

I've run this a few ways but just get the error "Was expecting 2 links not 3". I'm stuck, any help would be greatly appreciated.

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

4 Answers

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

I see three issues:

  • links are represented by anchor (a) elements, not list items
  • when supplying an id in a selector, the id should be prefixed with a pound sign (#)
  • the id selects the ul element, so the tag "ul" should not appear in the selector

I'll bet you can get it now without an explicit spoiler.

Chris Yarbrough
Chris Yarbrough
244 Points

Thank you, worked!

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

There are three issues with your selector:

  1. You forgot to prepend the gallery id selector with #, which is necessary when you are selecting ids.

  2. The element with the gallery id is the ul, so including ul in your selector is wrong.

  3. While it's very easy to read the word links and think of li that is actually incorrect. An li element is a list-item element, the link element is a (anchor).

So the selector should be:

let galleryLinks = document.querySelectorAll('#gallery a');
paulos kesete
PLUS
paulos kesete
Courses Plus Student 2,623 Points
paulos kesete
paulos kesete
Courses Plus Student 2,623 Points

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

paulos kesete
PLUS
paulos kesete
Courses Plus Student 2,623 Points
paulos kesete
paulos kesete
Courses Plus Student 2,623 Points

this don't work: somebody please.

let galleryLinks = document.querySelectorAll('#gallery a');

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

That should work. I even pasted it into the challenge to test it, and it passed.