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 Ed Bundy
Ed Bundy
5,408 Points

"select all links in the nav element and assign them to navigationLinks" - has this been taught in the video?

Or is this another case of the quiz or challenge solution including some format that was not taught in the video?

At any rate I need the solution because I can't think of what I can assign in line one that yields the results.

js/app.js 
let navigationLinks = document.getElementsByTagName('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">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>

3 Answers

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,967 Points
KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,967 Points

See the teacher's notes and this video

Ed Bundy
Ed Bundy
5,408 Points
Ed Bundy
Ed Bundy
5,408 Points

yes, I've seen the video. My guess is that the ultimate solution is something that is not taught in the video, like some way of compounding search values. For instance, a way of selecting the <li> elements within the <nav> element, but the video doesn't discuss any way of doing that. You either enter 'nav' or''li', but you can't do both and neither is going to yleld the correct result.

The closest thing to what the video has would be to use a psuedo-class selector:

let navigationLinks = document.querySelectorAll('nav:any-link');

But that doesn't work.

I'm quite sure the answer to this challenge isn't covered in the video. I'd like to move on to the other challenges, but It won't let me unless I provide a correct answer to this one. So I guess I will not benefit from the other challenges.

Ed Bundy
Ed Bundy
5,408 Points
Ed Bundy
Ed Bundy
5,408 Points

Just as I thought, the solution I was finally able get it to accept was using something not taught in the video, the descendent combinator, and then I just had to take a guess as to what syntax it would accept within the parentheses (quotes? no quotes? < > , etc).

Really, I've got plenty of books on JavaScript that isn't taught in the treehouse course which I can more productively spend my time learning with my own drills. Stick with testing on what you taught. Better yet, the syntax of how to search for descendents is valuable, so why not spend some time on that in the video.

Instead I had to waste time seeing if it would accept changes in the html to add ID tags and class names (it doesn't recognize the changes, but I had to waste time figuring that out, being a beginner and not knowing if perhaps it was my code that was the problem.)