Picking and choosing elements with querySelectorAll?

Question

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>

Answer 1 · 2018-10-26T03:14:39Z

October 26, 2018 3:14am

.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.

Answer 2 · 2018-10-26T03:19:39Z

October 26, 2018 3:19am

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!

Welcome to the Treehouse Community

Looking to learn something new?

Joseph Monreal

Joseph Monreal

Picking and choosing elements with querySelectorAll?

2 Answers

Eduardo Valencia

Eduardo Valencia

Tanuj Aswani

Tanuj Aswani