Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Getting a Handle on the DOM Practice Selecting Elements

Posted by Wild Porpoise
Wild Porpoise
2,213 Points

I am having trouble getting the elements found within nav, I wnat to know where in the video do we talk about this?

Why is it that there is such a big disconnect between this quiestion and what is being taught. I want to find out how I can get all the elements under <nav> the problem for lies inthe fact that even if I change the HTML code it still doesn't work because the question process doesn't save any changes to the HTML doc, I tried giving all the list items an ID. What should I do?

js/app.js 
let navigationLinks = document.getElementById('nav');
let galleryLinks;
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" class="selected">About</a></li>
          <li><a href="contact.html" class="selected">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

Juan Martin
Juan Martin
14,335 Points
Juan Martin
Juan Martin
14,335 Points

Hello Wild,

I saw that updating the HTML won't work because somehow it doesn't save the changes. I also see in your code that you're targeting the <nav> element, you should target all the <a> elements that are descendants of the <nav> instead, the .getElementById() method won't work in this case because it targets only one unique element, not a set of elements, and to do this you must use a method that does that.

A way you can achieve this real quick is using the .querySelectorAll() method to target all the <a> elements that are descendants of the <nav> element (to target them you must use CSS syntax):

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

Hope this helps :)