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 vihar jakkam
vihar jakkam
1,270 Points

On line 3 of app.js, select all images in the footer element and assign them to footerImages.

expecting 2 images not 0 is showing everytime

js/app.js 
let navigationLinks = document.querySelectorAll("nav a");
let galleryLinks = document.querySelectorAll("#gallery a");
let footerImages = document.getElementsByClassName(".social-icon");
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>

13 Answers

MARTIN CLASON
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
MARTIN CLASON
Full Stack JavaScript Techdegree Graduate 19,730 Points
MARTIN CLASON
.a{fill-rule:evenodd;}techdegree seal-36
MARTIN CLASON
Full Stack JavaScript Techdegree Graduate 19,730 Points

Just a comment... The videos did a very poor job of preparing us for this quiz. Very frustrating to need to use methods not taught in the videos to solve the quiz.

Randell Purington
Randell Purington
9,992 Points
Randell Purington
Randell Purington
9,992 Points

I agree. It touched on some here and some there but it was vague on this test. I am beyond lost so I used the MDN but it helped only a little but looking at the correct answer plus the MDN I was able to take notes.

But I do agree, there are sections that make me question if I skipped a video or did I zone out because I don't remember them covering it.

alexfishback
.a{fill-rule:evenodd;}techdegree
alexfishback
Full Stack JavaScript Techdegree Student 2,468 Points

I am glad I'm not the only one.

Matthew McQuain
Matthew McQuain
14,184 Points
Matthew McQuain
Matthew McQuain
14,184 Points

Coming in a year later, and it's still the same. Totally garbage lead up to take this quiz. Much, much worse than anything else I've done here.

Siddharth Pandey
Siddharth Pandey
7,280 Points

Yes for sure, was this challenge even taught in the videos?

JOASH MOARDEN
JOASH MOARDEN
Courses Plus Student 587 Points

++

Christopher Brown
Christopher Brown
4,843 Points

Thank you! I find that this happens more than one would appreciate. I understand the value in learning to research new information to pass a challenge, it can lead to a good skills in the working world, but sometimes we are missing so much info to do a challenge it is infuriating. It helps to know that I'm not alone in this frustration. Peace!

Christopher Brown
Christopher Brown
4,843 Points

Completely agree. Every once and a while this occurs, sometimes to the point of extreme frustration. I'm glad to research on the web on how to do certain things(I understand that is part of the skill set we are building), but there is often some sort of disconnect between the lessons and the challenges. It does not feel good to spend so much time on a challenge to then just have to look up an answer instead of using what you just learned. I'd rather study hard, take lots of notes and then feel as if I could actually accomplish something in the challenge as opposed to kind of feeling as if I've been mislead.

Rashika R
Rashika R
17,094 Points
Rashika R
Rashika R
17,094 Points

let footerImages = document.querySelectorAll(".social-icon");

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

:point_right: When using getElementsByClassName, the argument should not have a period.

That's a convention often used to distinguish class names from other identifiers, but in this case the argument will always be a class name so it is not used.

JOASH MOARDEN
PLUS
JOASH MOARDEN
Courses Plus Student 587 Points
JOASH MOARDEN
JOASH MOARDEN
Courses Plus Student 587 Points

This quiz should really be improved upon. All the quizzes so far followed the content of the videos prior whereas this one just seemed like it was full of curveballs. Initially the questions seemed simple enough, then after desperately combining all the combos I could think of I had to get my google on. This happened on each question and the solutions I found were not even mentioned in the video.

I got a lot of love for treehouse but this quiz is not up to par and could be very counter-productive to any learners with confidence issues etc.

However, if this is just a sneaky ploy to help us further our skills in the furtive art of Google-Fu then I will bow my head in deference.

Tom Dakan
Tom Dakan
3,967 Points
Tom Dakan
Tom Dakan
3,967 Points

The prompt asks you return all of the image objects in the footer. So let footerImages = document.querySelectorAll('footer img'); does exactly that.

Noe Tim
Noe Tim
1,597 Points
Noe Tim
Noe Tim
1,597 Points

let footerImages = document.querySelectorAll('footer img'); how can it be this ^ when there is a p and a element too

I thought it would go something like this: let footerImages = document.querySelectorAll('footer img a p');

Tom Dakan
Tom Dakan
3,967 Points
Tom Dakan
Tom Dakan
3,967 Points

Well, the prompt is to select the images. So there's no need to select the paragraphs (p) or anchors/links (a).

Why did you think you needed the 'a' and the 'p'? I'm not judging, just hoping I can help clear something up for you.

Nickolas Fuentes
Nickolas Fuentes
14,016 Points
Nickolas Fuentes
Nickolas Fuentes
14,016 Points

can someone explain why

let footerImages = document.querySelectorAll('footer img');

worked as well??

Van Young
Van Young
15,136 Points
Van Young
Van Young
15,136 Points

Yeah Why??? And why did task 2 need a '#'?

Van Young
Van Young
15,136 Points
Van Young
Van Young
15,136 Points

It wouldn’t work otherwise and I had look at what someone else did. I’m still not sure why it needs that

Tom Dakan
Tom Dakan
3,967 Points
Tom Dakan
Tom Dakan
3,967 Points

The hash (#) specifies to select elements by their ID's

The dot (.) specifies to select elements by their classname

You can read more about the selectors here: http://api.jquery.com/category/selectors/basic-css-selectors/

darrin allen
darrin allen
7,775 Points
darrin allen
darrin allen
7,775 Points

you would not need to use a # sign because footer is not an id document.querySelectorAll(#footer img); would be incorrect.

Omar Ocampo
Omar Ocampo
3,166 Points
Omar Ocampo
Omar Ocampo
3,166 Points

let footerImages = document.getElementsByClassName("social-icon");

Just in case for another students with the same issue, this code worked for me, hope is useful

Tim Degerman
seal-mask
.a{fill-rule:evenodd;}techdegree
Tim Degerman
Full Stack JavaScript Techdegree Student 12,164 Points
Tim Degerman
.a{fill-rule:evenodd;}techdegree
Tim Degerman
Full Stack JavaScript Techdegree Student 12,164 Points

This worked for me.

Selecting the images with a class of 'social-icon' inside of the "footer"-element. let footerImages = document.querySelectorAll("footer .social-icon");

Bethany Wallace
Bethany Wallace
3,833 Points
Bethany Wallace
Bethany Wallace
3,833 Points

Quiz definitely needs to be improved.

Ng Yan Xiang
Ng Yan Xiang
4,764 Points
Ng Yan Xiang
Ng Yan Xiang
4,764 Points

Why doesn't this code work:

let footerImages = document.querySelectorAll("footer > img");

while this would:

let footerImages = document.querySelectorAll("footer img");