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

Posted by Kira Woods
Kira Woods
5,732 Points

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,638 Points
Aakash Srivastav
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 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 :)

Kira Woods
Kira Woods
5,732 Points

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.

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,967 Points
KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,967 Points

Select the images in the footer not the links

Kira Woods
Kira Woods
5,732 Points
Kira Woods
Kira Woods
5,732 Points

Thank you!

Daniel Riches
Daniel Riches
19,847 Points
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.