JavaScript JavaScript and the DOM Getting a Handle on the DOM Practice Selecting Elements

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

not that li or the a tag

kevin curtis
kevin curtis
13,557 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'.

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

kevin curtis
kevin curtis
13,557 Points

Does your nested selection look like this:

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

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

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

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