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

Nick White
Nick White
8,326 Points
Posted by Nick White
Nick White
8,326 Points

Challenge Task 1 of 3

I have tried:

  1. Getting the elements by class name (Gave all three links the same classes): Doesn't work, says "Was expecting three links not zero"
  2. Getting the elements by ID (Gave the nav tag an ID then targeted that ID, when that didn’t work I put the same ID onto the ul tag but got the same answer): Doesn’t work, says “TypeError: 'null' is not an object (evaluating 'navigationLinks.length’)”, so it doesn’t want an element containing the contents it’s looking for, it wants the contents themselves.
  3. Getting the elements by its li tags: this would seem like the solution but the problem there is that there are more lis on the page than in the nav so it doesn’t work, just tells me it was expecting 3 links not 5 links.
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

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there, Nick White ! To solve this, you have a couple of choices but you may not edit the HTML file. Editing the HTML file will cause the challenge to fail. Secondly, I see that you've tried to select the list items, but it asks for the links. Remember, a link is denoted by the anchor tag or <a>.

You could start by making a variable to hold the "nav" element and then selecting the links from that. Remember that getElementsByTagName returns a collection of elements and not a single element, so you will have to give the [0] here to be able to further select from it.

// This holds the nav element
let nav = document.getElementsByTagName("nav")[0];
let navigationLinks = nav.getElementsByTagName("A");

Alternatively, you could choose to chain the selectors off each other like this:

let navigationLinks = document.getElementsByTagName("NAV")[0].getElementsByTagName("A");

But the easiest, and most concise solution is to use a CSS Selector in conjunction with a querySelectorAll. I see from your profile that you have a good number of points in CSS. So if I posted this CSS rule, I feel like you would likely understand it:

nav a {
   color: red;
}

This code says to change the font color to red for all links inside the <nav> element. The "nav a" part is our CSS selector. You can use these in conjunction with a querySelectorAll.

// This will also select all links inside the nav element
let navigationLinks = document.querySelectorAll("nav a");

Hope this helps! :sparkles: