Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Raul Cisneros
Raul Cisneros
7,319 Points

Help! Works in vscode and chrome, but I cant make it work here.

/**I thought this was going to straight forward and easy, but I cant make it work. I cannot select only the links in the nav with what was covered in the course.(If you can I have no idea how.) I love to solve things by myself, but this is taking way too long. I have looked at other sources and came up with what I have below. Like I mentioned in the title, it works in vscode and chrome, but I cant make it work here. I am able to select the three link tags on my machine but when I apply this to the course code it does not work.**/

// index.html
<ul id = 'ulTagOne'>
    <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>

// app.js
const ulTagOne = document.getElementById('ulTagOne');
let navigationLinks = ulTagOne.getElementsByTagName('li');

for (let i = 0; i < navigationLinks.length; i++) {
   navigationLinks[i].style.color = 'orange'; // for testing only
}
js/app.js
const ulTagOne = document.getElementById('ulTagOne');
let navigationLinks = ulTagOne.getElementsByTagName('a');
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 id = 'ulTagOne'>
          <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

Anton Klyuchkovksiy
Anton Klyuchkovksiy
8,327 Points

Hi, Raul!

I think, in this test you shouldn't edit .html file, only .js. You can select all navigation links by this:

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

You can check this video: https://teamtreehouse.com/library/using-css-queries-to-select-page-elements

Have a nice day :)

Raul Cisneros
Raul Cisneros
7,319 Points

Hello, Anton!

Well isn't that something...I tried the querySelectorAll, but not like above. I also tried the others with something similar like "nav ul li a" etc..., but I guess in the frustration I never went back and tried the querySelectorAll that way. I think I may have been putting commas between them as well, but not sure.

In the beginning I could see the solution being as simple as above, but as I tried more and more ways to solve the problem with no success, I kept trying different things like editing the html. This is one I wont be forgetting anytime soon. Thank you for your help!

Adam Beer
Adam Beer
11,313 Points

You can't use const ulTagOne variable, for() and don't modify the html page.

Select all links in the nav element and assign them to navigationLinks.

Now you have 5 list elements, but you just need three, all links in the nav element. Select the parent (nav) and after write in the selector the child name (a). Try the querySelectorAll().

Check this link, HTML DOM querySelectorAll() Method