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

Posted by Owa Aquino
Owa Aquino
19,277 Points

A Javascript event question.

Hi Guys!

I have an issue regarding a project I'm working on. The features should be is once I clicked an image of a movie/card it should display its corresponding button assigned to that card.

The problem is as follows:

  1. If I clicked the image only one button of the first movie card is displaying. If I click on a different movie card the button does not displayed.
  2. If I clicked on the movie card (not the first) the button that is visible is the button on the the first movie card.
  3. Uncaught TypeError: Cannot set property 'display' of undefined is displayed in the console

I'm thinking there's wrong on my variables or how I select the button? I tried .getElementsByTagName, class, qeuerySelectorAll. But it all has the same issue.

Sorry for my kinda vague explanation (I did my best). But it would be best if you see my work here.

http://codepen.io/owaaquino/pen/XMVqdv

Thank you very much in advance!

Cheers!

Owa

1 Answer

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

You're always selecting the first button.

By assigning button using document.querySelector('button'), you will always get the first button of the document (which is also the button of the first item) no matter which image you click. But instead of the first button of the document, you could get the first button of the image's list item parent instead: li.querySelector('button').

For a further enhancement, you might consider re-working your handler to operate on the list item itself instead of just the image. That way, clicking anywhere on the item would reveal the button.

Owa Aquino
Owa Aquino
19,277 Points

Hi Steven!

Thank you very much for pointing this out. And for the the additional enhancement I'll try to add it.

Cheers!

Owa