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
Kurt Coleman
2,967 PointsUnable to Complete Step 1 of Javascript and the DOM Challenge Task
I am struggling to use querySelectorAll to select <li> elements under the <nav> element. Question does not allow me to alter HTML. I've done research to show me how to use the NOT operator, but I don't this that is the point of the question. HOW do I select the <li> elements under <nav>?
let navigationLinks = document.querySelectorAll('nav, ul:not(#gallery) li');
for (let i=0; i<navigationLinks.length; i++) {
navigationLinks[i].style.Color = 'red';
console.log(`${navigationLinks[i]}`);
}
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">
<style>
nav ul {
}
ul li {
class='t1';
}
</style>
</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>© 2016 Nick Pettit.</p>
</footer>
</div>
<script src="js/app.js"></script>
</body>
</html>
2 Answers
Jennifer Nordell
Treehouse TeacherHi, Kurt Coleman! I also answered this question in this post. Again, the challenge is not asking you to pick the list items. It is asking you to pick the links. For step 1, your code should look like this:
let navigationLinks = document.querySelectorAll('nav a');
let galleryLinks;
let footerImages;
If it doesn't immediately work, try pressing "Restart" on the challenge because there may be something cached somewhere.
Hope this helps!
additional note The HTML file should remain unchanged. Any edits to the HTML file whatsoever will cause the challenge to fail. You currently have an extra <style> that wasn't there originally.
Kurt Coleman
2,967 PointsJennifer, Thank you so much. I dunno why I mistook a LINK for a LIST item but I did. I've been struggling with this for TWO days!!!
But my original question remains. How would I select the List Items under Nav without modifying the HTML?
And I understand the the <a> element is a descendant of the <nav> element, but its not a DIRECT descendant. Selecting it returns all of the <li> elements kinda by default. How would I select the <li> elements under <nav> otherwise?
Jennifer Nordell
Treehouse TeacherHi again, Kurt Coleman. Actually, what is returned is something actually something "array-like" and would simply be a list of the elements that are <a> elements. The direct descendent part is sort of irrelevant for the purposes of this challenge.
If you wanted to select the list items inside the <nav> you would do document.querySelectorAll('nav li');You could also do that by chaining getElement type statements:
document.getElementsByTagName('nav')[0].getElementsByTagName('li');
That would get the first nav then get all list items that reside within that nav element.