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 Sai Kiran Sagaram
Sai Kiran Sagaram
2,411 Points

How to solve this challenge?

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. help me

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

Adam N
Adam N
70,280 Points
Adam N
Adam N
70,280 Points

Within document.querySelectorAll(), target all the links that are children of the nav element.

Please mark my response as the 'best answer' if it helps you out!

Sai Kiran Sagaram
Sai Kiran Sagaram
2,411 Points

how target those links?

Adam N
Adam N
70,280 Points

Just like you would with CSS.

Aananya Vyas
Aananya Vyas
20,157 Points
Aananya Vyas
Aananya Vyas
20,157 Points

try: let navigationLinks = document.querySelectorAll("nav a");

Hope it helps. my bad: as 'a' targets the link elements!

Adam N
Adam N
70,280 Points

'a' targets the link elements

mark boulton
mark boulton
5,022 Points
mark boulton
mark boulton
5,022 Points

i can only get 8 or 6!????

Adam N
Adam N
70,280 Points

Not sure what youre referring to.