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

Alena Skaroupkova
Alena Skaroupkova
3,647 Points
Posted by Alena Skaroupkova
Alena Skaroupkova
3,647 Points

Selecting Elements in DOM task

In this task I am supposed to assign all links in the nav element to the 'navigationLinks' variable. I assume that I'm supposed to use the knowledge from recent lessons, specifically about using id and class attributes. There is one class attribute in the HTML element that I would use for selecting it. My solution would look something like this:

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

The issue is that there is only one class attribute, while I'm supposed to select ALL three of those nav links. I assumed that I'm supposed to simply imput into the original HTML document those two missing attributes, yet I'm still getting this error:

Was expecting 3 links not 1

Is there any other way doing it?

js/app.js 
let navigationLinks;
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

Antti Lylander
Antti Lylander
9,686 Points
Antti Lylander
Antti Lylander
9,686 Points

you must select all the a elements nested inside nav element. Tip: document.querySelectorAll('ancestor descendant');

https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_selectors

The descendant combinator ā€” typically represented by a single space ( ) character ā€” combines two selectors such that elements matched by the second selector are selected if they have an ancestor element matching the first selector.

Alena Skaroupkova
Alena Skaroupkova
3,647 Points
Alena Skaroupkova
Alena Skaroupkova
3,647 Points

Thank you for your answer. Yeah, I figured it out after some research. Unfortunately it's not explained well enough in the lessons how to access nested HTML elements.

Antti Lylander
Antti Lylander
9,686 Points
Antti Lylander
Antti Lylander
9,686 Points

Yeah, I remember struggling with these as well. Don't forget to choose best answer so everyone knows there is nothing to see here. :)

Edit: oh, you already did it, thanks