Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript and the DOM (Retiring) Getting a Handle on the DOM Practice Selecting Elements

I've gotten through the first two steps of the challenge, but I'm having trouble figuring out how to select the footer.

I don't understand why it doesn't work in the same way as the first part of this challenge where you're selecting the nav element.

js/app.js
let navigationLinks= document.getElementsByTagName('nav')[0].getElementsByTagName('a');
let galleryLinks = document.getElementById('gallery').getElementsByTagName('a');
let footerImages = document.getElementsByTagName('footer').getElementsByTagName('a');
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>

4 Answers

Aakash Srivastav
seal-mask
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,625 Points

Hey Kira Woods You are not specifying index like this : getElementsByTagName('footer')[0] .
You have done that in the first line but forgot in third line. Your code will look like this :

let navigationLinks= document.getElementsByTagName('nav')[0].getElementsByTagName('a');
let galleryLinks = document.getElementById('gallery').getElementsByTagName('a');
let footerImages = document.getElementsByTagName('footer').getElementsByTagName('a');

Hope this helps :)

Hi Aakash Srivatsav, I tried specifying it like this

let footerImages = document.getElementsByTagName('footer')[0].getElementsByTagName('a');

but it says that the wrong images or elements were selected.

Select the images in the footer not the links

Thank you!

Daniel Riches
Daniel Riches
19,847 Points

I didn't see the previous video, but to get multiple elements you can use: document.querySelectorAll("");
Basically getting the elements by css selector. The CSS Selector for the elements you're trying to get goes in between the quotes.