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

Edward Babino
Edward Babino
3,579 Points
Posted by Edward Babino
Edward Babino
3,579 Points

Need help with practice challenge

I've been trying to incorporate everything I've learned about DOM so far and by all accounts cannot seem to narrow this down. I thought this to be correct, but was mistaken.

What am I missing here?:

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.

js/app.js 
let navigationLinks = document.getElementsByTagName('nav');
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>
Amber Clark
Amber Clark
10,001 Points
Amber Clark
Amber Clark
10,001 Points

I'm working on this challlenge as well. I feel your pain!

I don't have the answer, but I know that the 'nav' tag only returns one reference because there is only one nav tag in the document.

Amber Clark
Amber Clark
10,001 Points
Amber Clark
Amber Clark
10,001 Points

I saw this in another post, and it works, but I'm not sure why. let navigationLinks = document.querySelectorAll('nav a');

Edward Babino
Edward Babino
3,579 Points
Edward Babino
Edward Babino
3,579 Points

Thanks, Amber. I figured it out later that 'a' represents the link within the nav element:

<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>

1 Answer

Nicholas Ward
Nicholas Ward
5,797 Points
Nicholas Ward
Nicholas Ward
5,797 Points

Your code is super close, but it's only selecting the nav element itself. You want to select all the links within the nav element. As far as I know, there are two options to do this:

// 1)
let navigationLinks=document.getElementsByTagName('nav')[0].getElementsByTagName('a');

//2)
let navigationLinks = document.querySelectorAll('nav a');

https://www.w3schools.com/jsref/met_element_getelementsbytagname.asp https://www.w3schools.com/jsref/met_document_queryselectorall.asp

Edward Babino
Edward Babino
3,579 Points
Edward Babino
Edward Babino
3,579 Points

Thanks, Nicholas. It felt like I didn't remember or catch that in the previous videos. I found out that this question has been posed on here multiple times.