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

Zachary Luke
Zachary Luke
8,046 Points

I keep getting 1 or 5 links, but never 3.

Trying to attach 3 links to my .js file, but when I do I keep getting either 1 or 5 links. I think I'm typing the descendant selectors incorrectly.

Could someone verify this please?

let navigationLinks = document.querySelectorAll("ul li");
let galleryLinks ;
let footerImages ;
<!DOCTYPE html>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='|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">
      <a href="index.html" id="logo">
        <h1>Nick Pettit</h1>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html" class="selected">About</a></li>
          <li><a href="contact.html" class="selected">Contact</a></li>
    <div id="wrapper">
        <ul id="gallery">
            <a class="selected" href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture.</p>
            <a class="selected" href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in Photoshop.</p>
        <a class="selected" href=""><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a class="selected" href=""><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2016 Nick Pettit.</p>
  <script src="js/app.js"></script>
Mark Wilkowske
Mark Wilkowske
14,843 Points

Hi Zachary, the challenge asks you to select links, not li's.

1 Answer

Eric Butler
Eric Butler
31,745 Points

Your JavaScript is looking for document.querySelectorAll("ul li"), which collects every <li> tag that's inside a <ul> tag (that's what "ul li" means). Your index.html file has 5 such <li> tags: 3 in your <nav>, and 2 in your <ul id="gallery">. So your JavaScript is correctly getting 5. You'd have to change something in your index.html file to ever get 1 here.

If you are trying to get 3 -- for example, the 3 links in your <nav> only -- you'd change the JavaScript selector like so:

let navigationLinks = document.querySelectorAll("nav ul li");


let navigationLinks = document.querySelectorAll("header li");

...just something that makes the <li>s you are selecting a little more specific.

Hope that clarifies enough for you!

Derek Ebie
Derek Ebie
4,334 Points

I have the same problem and i've tried both of your solutions but get this. "the wrong links or elements were selected. Be sure to select all links inside '<nav>'."