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

Joseph Monreal
Joseph Monreal
Full Stack JavaScript Techdegree Student 3,921 Points

Picking and choosing elements with querySelectorAll?

Trying to select links within the unordered list and instead of getting the two links existent I end up with three?

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

2 Answers

Eduardo Valencia
Eduardo Valencia
12,250 Points

.gallery means the class "gallery", but you have no class by that name. You only have an ID by that name. Try either fixing the selector or making the ID a class, and see if that works.

Tanuj Aswani
Tanuj Aswani
Full Stack JavaScript Techdegree Graduate 20,574 Points

Hi there! Just to clarify a little on what you might be looking for, I'm guessing the galleryLinks variable you have isn't providing you with the correct amount of links I imagine? If this is the case, then you might want to double check your code to see if you have listed gallery as a class versus listing gallery as an id for that specific unordered list. In your JS file, you use querySelectorAll with the class notation for gallery (ie. ul.gallery) instead of using the id notation (ul#gallery). That's perhaps why you might be running into that error.

If that is not the case, let me know what error you are running into with a console.log of the variables in question!