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

Kim Dallas
Kim Dallas
11,461 Points

this should work

what am I doing wrong?

js/app.js
let navigationLinks=document.querySelectorAll("nav ul li a");
let galleryLinks=document.querySelectorAll("#gallery li a");
let footerImages=document.querySelectorAll(".footer img 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>

1 Answer

Martin Jones
Martin Jones
Front End Web Development Techdegree Graduate 41,137 Points

Hi Kim,

For this one you just need to change ".footer" to just "footer" as this is an element not a class, similar to the "nav" element selected on line 1.

Then you are selecting all anchor elements that are contained within an image, but this does not match the HTML. So you could just switch this round to "footer a img" or simply "footer img".

The best way to think about this is, if it will work in CSS to target it, then it will work in the query selector :)

let navigationLinks=document.querySelectorAll("nav ul li a");
let galleryLinks=document.querySelectorAll("#gallery li a");
let footerImages=document.querySelectorAll("footer img");

Hope this helps.