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

Benjamin Cohen
seal-mask
.a{fill-rule:evenodd;}techdegree
Benjamin Cohen
Full Stack JavaScript Techdegree Student 6,045 Points
Posted by Benjamin Cohen
.a{fill-rule:evenodd;}techdegree
Benjamin Cohen
Full Stack JavaScript Techdegree Student 6,045 Points

Not accepting a variable consisting only of the 3 links demanded by the challenge

I wrote the following 2 lines of javaScript;

let itemsList = document.querySelector('ul') let navigationLinks = itemsList.children

If I show navigationLinks in the console I get;

TMLCollection(3) [li, li, li] 0: li 1: li 2: li length: 3

Each node 0, 1 and 2 contain a link, so I'm not sure why this isn't being accepted. I've been on this for a while and have learned a lot about the DOM trying to figure this out, but I must be misunderstanding the question. Any help would be appreciated.

js/app.js 
let itemsList = document.querySelector('ul')
let navigationLinks = itemsList.children
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

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,972 Points

<a> is for link. What you have selected are list items <li>.

You can still solve the task with what you have though. Only instead of children you will need a method that selects by tag. I would also just use the variables provided. Some challenges fail due to adding code when not asked to do so.

As an alternative you could look into using querySelectorAll and a descendant selector as suggested by the task.

Judith Copeland
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree seal-36
Judith Copeland
Full Stack JavaScript Techdegree Graduate 17,924 Points
Judith Copeland
.a{fill-rule:evenodd;}techdegree seal-36
Judith Copeland
Full Stack JavaScript Techdegree Graduate 17,924 Points

Review or view the Target General Siblings video.