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

Alita Edmonds
Alita Edmonds
6,068 Points
Posted by Alita Edmonds
Alita Edmonds
6,068 Points

How do I do this?

What do I add to this? I have tried everything. Thanks!

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

2 Answers

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

Your code selects every list item ("li") on the page. But the instructions ask you to "select all links in the nav element". To do that, you'll need to either chain selector functions together, or use a different one that can take a more complex CSS-type selector.

And whether your use one function or two, you'll have to select both the "nav" container and then the links ("a" elements) inside it.

angelod
angelod
6,694 Points
angelod
angelod
6,694 Points

had to watch that whole course twice. I also had problems with this and never figured it out unless searching for help. the course doesn't go over selecting both nav and a elements like ("nav a") so was disappointed never was taught in the previous videos. ):

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

A function which can handle that kind of selector is "querySelectorAll".

Alita Edmonds
Alita Edmonds
6,068 Points
Alita Edmonds
Alita Edmonds
6,068 Points

Thank you so much! On step two, the instructions say: On line 2 of app.js, select all links in the unordered list with the id of "gallery" and assign them to galleryLinks.

Why isn't this right? let galleryLinks = document.querySelectorAll('#gallery');

Thanks again!

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

Alita, that selector targets the list itself, but the instructions ask you to "select all links in the ...gallery". So like task 1, this one will also need a compound selector.

Alita Edmonds
Alita Edmonds
6,068 Points
Alita Edmonds
Alita Edmonds
6,068 Points

Thank you so much! It worked!