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 trialMarco Aurélio Angioluci
1,507 PointsHow should I select only the child <li> elements inside the parent node <nav>?
I'm having trouble getting to select only the 3 <li> elements that are inside the <nav> tag. And I don't know what I'm doing wrong.
let navigationLinks = document.getElementsByClassName('selected'); let galleryLinks; let footerImages;
My code get me just one result and I don't know why because I set to "selected" the classes of all the 3 <li> elements in the index.html file.
Also, the different codes that I tried got me 5 results (all the 5 <li> tags of the document).
But the correct is to get only the 3 <li> elements inside the <nav> tag.
Can anybody help me fix this?
let navigationLinks = document.getElementsByClassName('selected');
let galleryLinks;
let footerImages;
<!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>© 2016 Nick Pettit.</p>
</footer>
</div>
<script src="js/app.js"></script>
</body>
</html>
2 Answers
Jennifer Nordell
Treehouse TeacherHi there! First, and foremost, the challenge is not asking you to select the <li>
tags, but rather the links. Remember, links are denoted by the <a>
or anchor tag. You should not alter the HTML in any way. Altering the HTML could cause the challenge to fail.
There are a couple of ways to accomplish this. You could either use a CSS selector inside a querySelectorAll()
, which would be the fastest. But to accomplish this you will need to have prior knowledge of CSS selectors. I can however give you a hint here. In CSS if I wanted to select all h2 elements within the <main>
tag, I could pass in the CSS selector main h2
to a querySelector
like so: querySelectorAll('main h2')
.
Alternatively, you could create an extra variable to hold the nav
element and then retrieve all the <a>
tags from within it. A slightly more elegant option (without using querySelectorAll) would be to chain those selections.
let navigationLinks = document.getElementsByTagName('nav')[0].getElementsByTagName('a');
This line will first get a collection of all tags named "nav" and then chooses the first one from within that. Since the nav on this page is the only one there, this will work fine. Then we can chain another getElementsByTagName
to retrieve all the anchor tags.
As you can see, there are a number of solutions to this problem and I hope at least one of them helps you!
Marco Aurélio Angioluci
1,507 PointsThank you a lot, Jennifer Nordell ! ;) I'm glad I had your help. It was key, and very comprehensive!
Marco Aurélio Angioluci
1,507 PointsMarco Aurélio Angioluci
1,507 PointsHi Jennifer! Thanks A LOT for your help. I feel like I have commited all possible errors in this exercise.
I understood your ideas and applied them to slightly change my last attempt and it worked immediately! What I did was:
let navigationLinks = document.querySelectorAll('nav a');
I was mistakenly getting the <li> tags. Now I'm taking the <a> tags. Also, I was referencing incorrectly the tags inside the querySelectorAll element, because I was separating both tags with a comma ("nav, a") while it should just be a space ("nav a").
Then I tried to apply your other suggestion (the elegant one) to Question 2, like this:
I'll share what happened to me because it may help other students:
Apparently that piece of code was working for Question 2, but then I received the following message: "Oops! It looks like Task 1 is no longer passing". And this message appeared even when I just used the new solution too:
I was intrigued and came back to Question 1. Both ways of solving worked fine.
Then I discovered my mistake in this line:
let galleryLinks = document.getElementById('gallery')[0].getElementsByTagName('a');
Since getElementById returns only a single element, and not an array of elements, I shouldn't use the [0] position specifier. I took it out and the code then worked well finally.
Then, I moved confident to Question 3, and wrote the following mistaken code:
I couldn't believe that it was not working. BUMMER! In despair, I just corrected it like this:
And it worked! I felt relieved that at least one part of my new knowledge was working. Then, suddenly I got why the former code didn't work. It was because I used the getElementsByTagName without specifying the [0] position.
Finally, I did all the three questions again, to make sure I could reproduce them with no error. Everything went fine with this code:
This challenge was really a good challenge for me. I hope that I can retain this knowledge now and that I don't make the same mistakes again.
Once again, thank you a lot for your precious help Jennifer!
Jennifer Nordell
Treehouse TeacherJennifer Nordell
Treehouse TeacherMarco Aurélio Angioluci you're a rock star! That's amazing. No, seriously, learning to debug code is somewhat of an artform and you just took a giant leap forward. I'm only glad that I was able to help