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

Marie Josée Laporte
Marie Josée Laporte
8,188 Points
Posted by Marie Josée Laporte
Marie Josée Laporte
8,188 Points

practice Selecting Element challenge 1of3... from javascript DOM

I think I'm a bit confuse on how it work...

Here is the question:

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.

<!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 id="navElement">
          <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>

let navigationLinks = document.querySelectorAll("#navElement li");
let galleryLinks;
let footerImages;

the browser response: Bummer! Was expecting 3 links not 0

I don't understand why... Can someone help me?

3 Answers

andren
andren
28,558 Points
andren
andren
28,558 Points

You seem to have misunderstood the instructions slighty, they want you to select all a (anchor) link elements that are nested in a nav element. Not li (list-item) elements. You can do that without adding a class to the HTML, for this task you are not meant to touch the HTML document at all.

You can accomplish the task by simply selecting the `nav element instead of the navElement class that you added and selecting the a element instead of li. Like this:

let navigationLinks = document.querySelectorAll("nav a");
Marie Josée Laporte
Marie Josée Laporte
8,188 Points
Marie Josée Laporte
Marie Josée Laporte
8,188 Points

ok I thought I've tried it... maybe not... I found difficult to select an element... I think I don't quite understand the right way to do it yet. It still confuse me how to use a descendant selector... Do you have a good ressources to help me understand? You answered me yesterday and when you explain it. I get it! but when I'm alone it's not as easy... and I try things that work or not...

I'm not sure if i tried your answer... but I tried this one for sure:

let navigationLinks = document.querySelectorAll("nav li");

I know my solution didn't work but why? Should I've write this instead:

let navigationLinks = document.querySelectorAll("#navElement li a");

thank you very much once again. I know I'm taking a lot of your time... but it's greatly appreciated!

Victor Wooding
Victor Wooding
12,430 Points
Victor Wooding
Victor Wooding
12,430 Points

li is a list item and not a link