JavaScript JavaScript and the DOM Getting a Handle on the DOM Practice Selecting Elements

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
6,665 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,158 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

Thanks for the answer!