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

Dalin Nkulu
Dalin Nkulu
13,101 Points

Next, select all links inside the unordered list with the ID gallery and assign them to the variable galleryLinks.

i really don't know what to do, i try document.querySelectorAll('ul'); but it not working

js/app.js
let navigationLinks = document.querySelectorAll('nav a');
let galleryLinks = document.querySelectorAll('ul');
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>
Dave StSomeWhere
Dave StSomeWhere
19,760 Points

Your query select all will select all/both the ul elements - the challenge is asking you to just select one, the one with the id of gallery. Correction - as per Daniel below, read the requirement carefully - you need to target the links not the list

1 Answer

Daniel Baker
Daniel Baker
14,651 Points

Break this down

Next, select all links inside the unordered list with the ID gallery and assign them to the variable galleryLinks.

  1. Select: ALL "Links" which means <a> tags (NOT Unordered Lists)
  2. Where: Inside the <ul id="gallery">
Daniel Baker
Daniel Baker
14,651 Points

So, Similar to your previous

let navigationLinks = document.querySelectorAll('nav a');

find the 'a' tags inside the 'ul' with the '#gallery' id.