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 Danny Beaudoin
Danny Beaudoin
1,966 Points

Ive been stuck for 3 days

I have been stuck on the question for 3 days now. I have rewatched the videos numerous times now. I can't seem to find a solution.

Here is what I try:

JavaScript: let navigationLinks = document.querySelectorAll("navLinks");

HTML: <nav class="navLinks"><ul><li></li><?ul></nav>

Thank you in advance for the help.

js/app.js 
let navigationLinks = document.querySelectorAll('navLinks:li');
let galleryLink;
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 title="navLinks"><a href="index.html" class="selected">Portfolio</a></li>
          <li title="navLinks"><a href="about.html">About</a></li>
          <li title="navLinks"><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

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

Think about CSS selectors.

You have a good idea using querySelectorAll, just remember that the selectors should be constructed as if you were using CSS. The instructions say "select all links in the nav element ". Since links are represented by "a" elements, then a descendant selector that would target only those in the "nav" element would be: "nav a".

Danny Beaudoin
Danny Beaudoin
1,966 Points

Thank you very much. That worked and I can't believe I did not notice it. I don't really find the videos as informative in this situation as they should be. I am having difficulties on the second part of that challenge as well. Its odd because up until this point I really haven't had much trouble learning the syntax and how to properly "word things".

In the second part of the challenge it asks about the elements with the gallery id, I'm using this:

let galleryLink = document.queryselectorall("gallery");

I have even tried:

let gallerLink= document.queryselectorall("ul: gallery");

and it is not working. I don't seem to understand how to properly select things.

Any insight would be greatly appreciated as I seem to be stumped.

Thanks,

Jason Nestmann
Jason Nestmann
22,538 Points
Jason Nestmann
Jason Nestmann
22,538 Points

On the second task you are selecting the id=gallery links. When making selections, use a dot before class names and a # before ids. In this case the querySelectorAll("#gallery a").

Danny Beaudoin
Danny Beaudoin
1,966 Points

Thank you!