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 Bruce Barry
Bruce Barry
1,771 Points

What variables are you looking for?

I am on (https://teamtreehouse.com/library/javascript-and-the-dom-2/getting-a-handle-on-the-dom/practice-selecting-elements) I have tried passing a great number of varies including slicing to get only the href links(e.g. index.html, about.html, contact.html) but I can not seem to please the required elements. I have passed each <li><a contents along with the whole links but am still receiving a Bummer message"The wrong links or elements were selected". What exactly am I suppose to pass here???

The question/directions are as follows, "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."

js/app.js 
let navigationLinks = [];
let galleryLinks;
let footerImages;

/*
a function that passes a string, finds the first 2 '"' from the href and returns the sliced contents within
*/
function done(strings){
  let start= strings.indexOf('"')+1;
  let end= strings.length;
  let thing2 = strings.slice(start, end);
  let start2 = thing2.indexOf('"') + start;
  let newThing= strings.slice(start, start2);
  return newThing;
}

/*
a while loop that finds the first 3 links and pushes them to the navigationLinks array
*/

const test= document.querySelectorAll("li");
var i =0
while (i < 3) {
  let thing = test[i].innerHTML;
  var links= done(thing);
  alert(donish);
  navigationLinks.push(links);
   i++;
}
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">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>

4 Answers

Clinton Johnson
Clinton Johnson
28,714 Points
Clinton Johnson
Clinton Johnson
28,714 Points

To piggyback off of Seth you can select elements with elements like this HINT HINT lol document.querySelectorAll('nav a');

Bruce Barry
Bruce Barry
1,771 Points

Thank you Clinton,

I was unsure how to get the nested a> links within the <nav> w/o returning all the links in the script. This one bit of code worked like a charm!

Clinton Johnson
Clinton Johnson
28,714 Points
Clinton Johnson
Clinton Johnson
28,714 Points

No problem Bruce Barry, thats what we are all here for to help each other...

Seth Kroger
Seth Kroger
56,413 Points
Seth Kroger
Seth Kroger
56,413 Points

The important thing to keep in mind here is that links are anchor tags, <a>, and all you need to do here for step one is select the <a>'s within the <nav>. One simple statement using querySelectorAll() should be all you need for each of the challenge's three steps.

Bruce Barry
Bruce Barry
1,771 Points

Thank you Seth! I was overthinking it after I could not find the answer using easy methods.

Lee Cockcroft
Lee Cockcroft
5,147 Points
Lee Cockcroft
Lee Cockcroft
5,147 Points

Could someone explain why the following link wouldn't work?

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

I've got the answer from above, but dont see why this wouldn't be the same thing?

Clinton Johnson
Clinton Johnson
28,714 Points
Clinton Johnson
Clinton Johnson
28,714 Points

Hey Lee, this reason why this wouldn't work is for code challenge purposes. The code challenge wants you to select all the link <a> and in you code you would be selecting all the <li>. hope this helps