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 ghazikerkeni
ghazikerkeni
7,873 Points

Couldn't select the navigation links

I am stuck in the first code challenge I need to select the three links inside the nav I used querySelectorAll but in vain

I also tried adding classes to those links and used getElementsByClass but it won't work either I think this question is kinda weird since we should be free to use whichever method to select especially the question don't precise which one should be used

Could someone help me please?

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

Benjamin Hedgepeth
Benjamin Hedgepeth
5,672 Points
Benjamin Hedgepeth
Benjamin Hedgepeth
5,672 Points

In the challenge it is saying to select all links, a, nested in the nav element. With your navigation-links class, you are targeting the ul.

To pass the first challenge it is looking for a descendant selector:

let navigationLinks = document.querySelectorAll("nav a");
MR. 7
MR. 7
24,079 Points
MR. 7
MR. 7
24,079 Points

Ghazi, let's review the question, together! :)

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.

The question wants us to select all the links in the nav element. Okay, let's do that!

But first, what is the nav element?

Let's look in the index.html file to see if we can pintpoint this particular element, okay? :)

nav is short for navigation, so I assume that this element will be at the top of the body element. There it is, near the top of body. Okay, now that we have isolated this, let's figure out what "links" are.

A quick search on Google yields that a tags are the links. Nice. Let's combine these two pieces of knowledge to get the correct answer.

let navigationLinks = document.querySelectorAll('nav a');
let galleryLinks;
let footerImages;

Above, we are using the method querySelectorAll to get all a elements within nav.

I hope this has been helpful!

Let us (or me) know if you need more help!

Never Stop Learning

ghazikerkeni
ghazikerkeni
7,873 Points
ghazikerkeni
ghazikerkeni
7,873 Points

Thanks a lot

MR. 7
MR. 7
24,079 Points

You're welcome!

Here's a helpful resource on selectors.

Note: The one you solved this challenge with is in the sixth row: div p. I think the description will help paint a better picture: "Selects all <p> elements inside <div> elements." Just substitute the appropriate elements, and you're good!

Let us know if you need any further help!