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

Lee Gentile
Lee Gentile
1,707 Points
Posted by Lee Gentile
Lee Gentile
1,707 Points

What am I doing wrong?

So it wants me select various elements on the page but it keeps telling me that it was expecting 3 links rather than 1:

Ive been using:

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

shouldn't that select all <nav> Elements?

Is there something painfully obvious I'm missing?

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>

3 Answers

Jonathan Rhodes
Jonathan Rhodes
8,086 Points
Jonathan Rhodes
Jonathan Rhodes
8,086 Points

It wants you to select all links inside the <nav> tag, in which case you will want to use let navigationLinks = document.querySelectorAll('nav a');

Lee Gentile
Lee Gentile
1,707 Points
Lee Gentile
Lee Gentile
1,707 Points

I tried that and it now says that it's 'undefined'. Still not quite sure why the document.querySelectorAll('nav'); isn't selecting all the nav tags like it asked for.

Jonathan Rhodes
Jonathan Rhodes
8,086 Points
Jonathan Rhodes
Jonathan Rhodes
8,086 Points

I just tried the challenge for myself with the code I posted and it worked.

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.

document.querySelectorAll('nav a');

Selecting the nav does not work because you are only selecting that one element. This challenge asks for all links inside the nav element.

Lee Gentile
Lee Gentile
1,707 Points
Lee Gentile
Lee Gentile
1,707 Points

oh ok weird, I tried it again and it worked, but now for the second one it asks to select everything in the id = gallery so I'm using:

let galleryLinks = document.getElementsById('gallery');

and it's saying now that step 1 isn't passing.

I don't remember him specifically mentioning how to select links within an element in the lesson, like using ('nav a'), is there something similar that I'm not doing when using document.getElementsById('gallery');?

Thanks for the help!

Jonathan Rhodes
Jonathan Rhodes
8,086 Points
Jonathan Rhodes
Jonathan Rhodes
8,086 Points

querySelectorAll() works like a CSS selector. So by entering document.querySelectorAll('nav a'). I selected all <a> tags falling under the nav element. This challenge wants you to use querySelectorAll() to return a list of elements. document.getElementsById('gallery'); does not work, because:

  1. An id can only be used once, so the function would be document.getElementById('gallery');
  2. This would only select the element of gallery and not the links contained in, which the challenge asks for.

document.querySelectorAll('#gallery a') will get you the links it wants. Just picture it like a CSS selector.

Circe Vixenia
Circe Vixenia
3,270 Points
Circe Vixenia
Circe Vixenia
3,270 Points

I agree, Lee - the instructor didn't mention anything about using an 'a' to select all of anything in the lessons. Either he made a big oversight, or there is another way that would work that we were taught, but I also cannot deduce it.

Lee Gentile
Lee Gentile
1,707 Points
Lee Gentile
Lee Gentile
1,707 Points

Ok great I don't have a very strong knowledge of CSS and it wasn't covered very extensively in the lesson, so these seemingly easy tasks have thrown me for a bit of a curve. Thanks again for the help!

Jonathan Rhodes
Jonathan Rhodes
8,086 Points
Jonathan Rhodes
Jonathan Rhodes
8,086 Points

No problem. If you are really serious about JavaScript, look into some of the stuff on HTML and CSS. It will really help you make sense of jQuery. I have learned both elsewhere, but from what I have seen on here, the lessons on those topics go pretty in depth.