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

David Donohue
David Donohue
1,110 Points
Posted by David Donohue
David Donohue
1,110 Points

I can't figure this out...trying to access nested html elements

Either i'm a complete idiot or something is broken with this exercise. Nothing I try works...

js/app.js 
let navigationLinks = document.getElementsByTagName('nav').getElementsByTagName('li')
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>

3 Answers

Zachary Logan
Zachary Logan
3,001 Points
Zachary Logan
Zachary Logan
3,001 Points

You will actually want to use the document.querySelectorAll() function to retrieve all of the navigation links and assign them. inside of that you will located the links themselves by using: 

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

If you have any further questions or if this does not help feel free to let me know!

David Donohue
David Donohue
1,110 Points
David Donohue
David Donohue
1,110 Points

Thanks Zachary, I was driving myself crazy! Now I'm having the same problem with part 2, assigning all the UL li elements with the Gallery ID, I i'm using querySelectorAll('gallery li a') but it keeps giving me the error: expecting k2 elements not 3...regardless of what I put in the parenthesis. I've tried ('gallery'), ('gallery li'), ('gallery li a') etc. And if i try different method like getElementById or getElementsByTagName i get an error saying "it looks like task 1 is no longer working....any suggestions?

Jason Sikes
Jason Sikes
Courses Plus Student 10,202 Points

Zachary Logan Thank you. I was so close to getting it but I did not add all the elements to the argument. Thank you again. I was about to beat my head. Google was not much help also.

Robert Stefanic
Robert Stefanic
35,170 Points
Robert Stefanic
Robert Stefanic
35,170 Points

It's a bit tricky, but there are two things going on here.

  1. Remember that getElementsByTagName() returns an array, not a single element. So when you're calling it on 'nav', be sure that you're selecting the element from the array.

  2. You need to select the link elements, not the li elements.

P.S. Don't forget your semicolon at the end of your declaration. ;)

David Donohue
David Donohue
1,110 Points
David Donohue
David Donohue
1,110 Points

Thanks Robert for replying! I ended up using the answer above from Zachary because I couldn't figure out how to use bracket notation to access the items within the array. Thank you though for your response!

Sharina Jones
PLUS
Sharina Jones
Courses Plus Student 18,771 Points
Sharina Jones
Sharina Jones
Courses Plus Student 18,771 Points

Hi David,

It looks like your first line of code is missing a semi-colon. Is that what's causing the issue?

David Donohue
David Donohue
1,110 Points
David Donohue
David Donohue
1,110 Points

That was probably part of it, thanks for replying!