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 Spires Vork
Spires Vork
Courses Plus Student 460 Points

Hi, here I know how to manipulate the nav links (change colors, etc.etc) but don't know how to STORE them in a variable?

Hello,

In this exercise, I successfully manipulated the NAV links with the for loop.

But I don't know how to JUST STORE them in a variable. In the tutorial, it's explained how to manipulate elements with the for loop but not how to dynamically store elements in variables.

Can you help me with this exercise so I can move forward?

Thanks!

js/app.js 
function nav() {
  let someLet = document.getElementsByClassName("selected");

  for (let i=0; i < someLet.length; i++) {
    navigationLinks = someLet[i];
  }
  return navigationLinks

};

let navigationLinks = 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" 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

Emmanuel C
Emmanuel C
10,636 Points
Emmanuel C
Emmanuel C
10,636 Points

Hey,

You can use document.querySelectorAll to get all elements based on there tagname, class, or id. In the first challenge it wants you to get all of the links that are inside a nav.

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

By separating each tag name with a space you can select all of the a link tags that are nested within the nav tag.

Steve Gallant
Steve Gallant
14,943 Points
Steve Gallant
Steve Gallant
14,943 Points

Hello Spires, There is no link to the particular video you are referencing, but I'll take a shot at an answer. If I'm understanding the question correctly, you ARE already storing the elements in a variable.

The line

let someLet = document.getElementsByClassName("selected");

is declaring the variable "someLet" and assigning to it an array of all elements from the DOM with the class called "selected". Once that is done, you can use whatever array methods you like to access those stored elements via the array name and index number.

Let me know if this helps or if I've misunderstood the question.

Good luck! Steve

Spires Vork
Spires Vork
Courses Plus Student 460 Points

Thanks for the answer!