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 Takahiro Ogawa
Takahiro Ogawa
7,192 Points

I tried to add class 'selected' to all of my <li> tags and select them but it didn't work. I don't k what part is wrong

I don't know what part of this code is not working. I feel like the change I added to HTML file is not reacted with the result.

js/app.js 
let navigationLinks = document.getElementsByClassName('selected')
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" 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>&copy; 2016 Nick Pettit.</p>
      </footer>
    </div>
  <script src="js/app.js"></script>
  </body>
</html>

2 Answers

Adam Beer
Adam Beer
11,314 Points
Adam Beer
Adam Beer
11,314 Points

In the following tasks you'll be required to select various elements on the index.html page.

In the app.js file on line 1, select all links in the nav element and assign them to navigationLinks.

Why add two class in the html file? This isnt a Html course, please remove the class from the html file :) And now, use document.querySelectorAll() method and select nav a. The links there are here. Hope this help! Check how does it works the querySelectorAll()

Takahiro Ogawa
Takahiro Ogawa
7,192 Points

Thank you!! Helped me a lot

Sekoyya Little
seal-mask
.a{fill-rule:evenodd;}techdegree
Sekoyya Little
Front End Web Development Techdegree Student 7,651 Points
Sekoyya Little
.a{fill-rule:evenodd;}techdegree
Sekoyya Little
Front End Web Development Techdegree Student 7,651 Points

You need to be more specific about which list you are targeting and they are requesting the links not just the list item

let navigationLinks = document.querySelectorAll('nav li a');