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

Julien Arseneau
seal-mask
.a{fill-rule:evenodd;}techdegree
Julien Arseneau
Full Stack JavaScript Techdegree Student 5,200 Points
Posted by Julien Arseneau
.a{fill-rule:evenodd;}techdegree
Julien Arseneau
Full Stack JavaScript Techdegree Student 5,200 Points

I don't understand what my error is.

It says that it doesn't create links.

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

1 Answer

Adomas Domeika
Adomas Domeika
6,151 Points
Adomas Domeika
Adomas Domeika
6,151 Points

So, first of all, you need all the navigation links, which means that you need to select (a). Second of all, you are trying to select the not existing class nav with the query selector .nav. Last of all, but not least, if you want to select nav links, you have to pass the tag name nav and it's link - a. So, the final query selector sentence would be - 

  document.querySelectorAll('nav a');

Just, don't forget this - if you want to select a tag name nav, don't provide any additional details - ('nav'), if you want to select the class with the name of nav, you have to select it, by providing the period - ('.nav'), if you want to select the id with the name of nav, then you have to provide the hash symbol - ('#nav'). Hopefully, this explains everything :)

Adomas Domeika
Adomas Domeika
6,151 Points
Adomas Domeika
Adomas Domeika
6,151 Points

By the way, if you want to be more specific, you could use ('nav ul li a').