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

Alexandra Edwards
Alexandra Edwards
4,686 Points
Posted by Alexandra Edwards
Alexandra Edwards
4,686 Points

Is there something I'm missing for selecting all links in the nav element and assigning them to navigationLinks?

I've tried different methods, but can't seem to get this one to work. This may just be one of those "duh" moments. Thanks for taking a look! :)

js/app.js 
let navigationLinks = document.qetElementsByTagName('nav');

for (let i = 0; i < navigationLinks.length; i +=1) {
  navigationLinks[i];
}

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

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

Well, you have "qetElementsByTagName" (with a "q") instead of "getElementsByTagName" (with a "g"). But that's not the whole issue. That would get the "nav" element, but the instructions say to "select all links in the nav element".

To do that, you'll need to chain another function to select the links; or you could use a different function (like "querySelectorAll") that would allow you to use a CSS-style descendant selector (such as "nav a").

I'm going to guess you were just testing something with that loop, but just to be clear no loop is needed for this challenge.

Alexandra Edwards
Alexandra Edwards
4,686 Points
Alexandra Edwards
Alexandra Edwards
4,686 Points

Thanks for the response Steven,

I didn't realize I could add more than one tag element with just a space in between, such as ('nav a'). I was trying some crazy things (why there was the typo 'q') and added the loop just to see if that was the issue. Your response definitely helped, thanks so much!

Happy Friday. :)

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

Just remember, that kind of selector only works with the "querySelector" functions. You can still do the job using "getElementsByTagName" but you'd need to chain 2 of them together since each can take only a single name argument.

Alexandra Edwards
Alexandra Edwards
4,686 Points
Alexandra Edwards
Alexandra Edwards
4,686 Points

Got it. You seem to know things. I appreciate the help!

Rich Donnellan
MOD
Rich Donnellan
Treehouse Moderator 27,696 Points
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,696 Points

Hi, Alexandra!

You're way overthinking this! There are usually methods that do all the "heavy lifting". Take a look at this video again:

https://teamtreehouse.com/library/using-css-queries-to-select-page-elements

Let me know if you need any more help! Also, be sure not to overspecify. You'll understand once you figure out what to use. ;)

Alexandra Edwards
Alexandra Edwards
4,686 Points
Alexandra Edwards
Alexandra Edwards
4,686 Points

Hey thanks for the response Rich,

Got it! Yay. I realized I could add more than one tag element with just a space in between, such as ('nav a'). I don't remember the video mentioning that, but will look again.

Thanks so much again and Happy Friday. :)

Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,696 Points
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,696 Points

You're welcome. Happy Fri-yay to you too! ?

Yeah, sometimes you'll have to read the documentation elsewhere to further your grasp on the subject. I recommend the MDN Web Docs ā€“ specific to querySelectorAll.