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!

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

Abdul Azeez
Abdul Azeez
3,884 Points

difficult passing the code challenge

cant get the 3 links, i keep on getting 5 links

let navigationLinks;
let galleryLinks;
let footerImages;
const myLinks = document.querySelectorAll("li");
for ( let i = 0; i < 3; i += 1) {
  navigationLinks+= myLinks[i];
<!DOCTYPE html>
    <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">
      <a href="index.html" id="logo">
        <h1>Nick Pettit</h1>
          <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>
    <div id="wrapper">
        <ul id="gallery">
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture.</p>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in Photoshop.</p>
        <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>
  <script src="js/app.js"></script>

2 Answers

Steven Parker
Steven Parker
225,664 Points

I'm baffled by the error message "Bummer: Was expecting 3 links not 75". I would expect that adding elements to an undefined variable would simply fail, not give 75 links.

But you won't need a loop, the "querySelectorAll" method will do what you need with the right argument.

Also, remember that links are implemented with anchor ("a") elements, an "li" is a list item.

Try thinking about understanding specificity. The for loop is not needed but I could see what you were trying to do. Here are 2 ways you could achieve what you want.

let navigationLinks = document.querySelectorAll("nav ul li a");
let galleryLinks;
let footerImages;

You could also try adding a class to the parent ul. then using querySelectorAll with the class Like this


<ul class="navlinks">


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

I hope that helps.

Steven Parker
Steven Parker
225,664 Points

:warning: For this challenge, you're not allowed to modify the HTML. It is provided only for your reference.

Also, when constructing a descendant selector it's not necessary to list the entire ancestry. Just the outer container and the target will do.