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 Maurice Hobbs Jr
Maurice Hobbs Jr
5,278 Points

selecting links

keep getting error you need to select 3 links you selected 0

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

4 Answers

Maurice Hobbs Jr
Maurice Hobbs Jr
5,278 Points

not that li or the a tag

kevin curtis
kevin curtis
15,287 Points
kevin curtis
kevin curtis
15,287 Points

Hi Maurice,

The challenge is asking you to select the links inside the unordered list. You need to target the "a" tags. I'd suggest using the querySlectorAll method for this challenge. 

let navigationLinks;                                                         
let galleryLinks;
let footerImages;

navigationLinks = document.querySelectorAll('Put your element selection here');

The "a" tags are nested inside the nav -> ul -> li

Also be sure to leave out the angled brackets in your selector. You have '<nav>' in yours, where you should have 'nav'.

Maurice Hobbs Jr
Maurice Hobbs Jr
5,278 Points

i tried using the nested version version above and get illegal string

kevin curtis
kevin curtis
15,287 Points
kevin curtis
kevin curtis
15,287 Points

Does your nested selection look like this:

navigationLinks = document.querySelectorAll('nav ul li');
kevin curtis
kevin curtis
15,287 Points
kevin curtis
kevin curtis
15,287 Points

Should have included the 'a' tag in that one I just posted:

navigationLinks = document.querySelectorAll('nav ul li a');
Maurice Hobbs Jr
Maurice Hobbs Jr
5,278 Points
Maurice Hobbs Jr
Maurice Hobbs Jr
5,278 Points

it on the footer section but putting ('footer') select 1 and ( ' footer a' or # for footer) selects 0