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

yan wang
yan wang
2,449 Points
Posted by yan wang
yan wang
2,449 Points

How to solve this?

In the following tasks you'll be required to select various elements on the index.html page.

In the app.js file on line 1, select all links in the nav element and assign them to navigationLinks.

js/app.js 
let navigationLinks = document.querySelectorAll("ul > a")
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" class="selected">About</a></li>
          <li><a href="contact.html" class="selected">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>
Steven Parker
Steven Parker
230,274 Points
Steven Parker
Steven Parker
230,274 Points

You already asked about this, and I posted an answer there.

You may want to delete this duplicate question.

yan wang
yan wang
2,449 Points
yan wang
yan wang
2,449 Points

I saw your comments but still don't know the answer to this question.

Can you let me know how to write the code?

Thanks, Yan

5 Answers

yan wang
yan wang
2,449 Points
yan wang
yan wang
2,449 Points

Got it. Thank you Steven!

Steven Parker
Steven Parker
230,274 Points
Steven Parker
Steven Parker
230,274 Points

yan wang — Glad to help. But normally, you'd select the answer that most helped to resolve the issue as "best answer". Selecting your own comment might be confusing to other readers.

yan wang
yan wang
2,449 Points
yan wang
yan wang
2,449 Points

Thank you for your help! I got it correct, but for the second question, it's showing wrong.

Question: On line 2 of app.js, select all links in the unordered list with the id of "gallery" and assign them to galleryLinks.

My Answer: let navigationLinks = document.querySelectorAll("nav a"); let galleryLinks = document.querySelectorAll("ul .gallery"); let footerImages;

Steven Parker
Steven Parker
230,274 Points
Steven Parker
Steven Parker
230,274 Points

Periods identify class names, but ID's, are prefixed with "#". You won't need to mention "ul", since the ID is guaranteed to be unique. And the instructions still want links, so the right-side term of the selector will be "a" again.

Bindu Nagireddy
Bindu Nagireddy
3,090 Points
Bindu Nagireddy
Bindu Nagireddy
3,090 Points

let galleryLinks =document.querySelectorAll("a #gallery") what is wrong in this answer

Bindu Nagireddy
Bindu Nagireddy
3,090 Points
Bindu Nagireddy
Bindu Nagireddy
3,090 Points

let galleryLinks =document.querySelectorAll("#gallery a") works

Steven Parker
Steven Parker
230,274 Points
Steven Parker
Steven Parker
230,274 Points

The correct answer is a mix of what you had before and now. You still need "nav" on the left, since you want only the items in the nav. And you need "a" on the right, since the items you want are links. But it's not a direct relationship, so you do not want the ">" operator, but just a space in between.

Jeffrey Libatique
Jeffrey Libatique
6,701 Points
Jeffrey Libatique
Jeffrey Libatique
6,701 Points

Hi Steven. I want to understand the method used on the answer you just described on the problem. can you point me to a link or topic here in TreeHouse. Your reply will be much appreciated.

Bindu Nagireddy
Bindu Nagireddy
3,090 Points
Bindu Nagireddy
Bindu Nagireddy
3,090 Points

let navigationLinks = document.querySelectorAll("nav");

Will this not list me evrything under nav tag , can you help me understand why we are using ("ul > a") let galleryLinks;