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

Sebastian Vanderlinden
Sebastian Vanderlinden
7,936 Points
Posted by Sebastian Vanderlinden
Sebastian Vanderlinden
7,936 Points

How can I select the ul elements with the id of gallery?

How can I select the unordered list elements with the id of gallery? I have tried many different variations but nothing seems to be working (usually says it is getting 3 values when it is expecting 2): document.querySelectorAll('gallery ul'); document.querySelectorAll('gallery a'); document.querySelectorAll('section gallery');

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

2 Answers

Dan Weru
Dan Weru
47,649 Points
Dan Weru
Dan Weru
47,649 Points

Hello, that depends on what you want to select. If you want to select the unordered lists with an id of gallery, you should use the have

   let gallery = document.querySelectorAll('#gallery');
  // or
  //let gallery = document.querySelectorAll('ul#gallery');

ELSE If you want select the anchor elements in the unordered lists, you could say

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

Note that you have to use the hash sign in front of the id selector. Hope this helps.

Sebastian Vanderlinden
Sebastian Vanderlinden
7,936 Points
Sebastian Vanderlinden
Sebastian Vanderlinden
7,936 Points

Thank you! The second option worked in the end. Also, I forgot to add the '#' so thanks for reminding me. All the best.

Dan Weru
Dan Weru
47,649 Points
Dan Weru
Dan Weru
47,649 Points

You’re most welcome. Have a good one, cheers.