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

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Posted by Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Need help and a tip please

HI,

I'm doing a modal, and so, first of all, is this the proper way to do it?

Second, why my modal doesn't work? Everything seems fine.

http://codepen.io/Aurelian/pen/ZLQeGP

1 Answer

Steven Parker
Steven Parker
230,274 Points
Steven Parker
Steven Parker
230,274 Points

:point_right: I'm not sure what you mean by "everything seems fine" if it doesn't work. :smirk:

But here's a few issues I noticed:

  • getElementsByClassName returns a collection, but you treat the result as if it were an element
  • you could subscript the result if you want an element, or use querySelector instead
  • you forgot to enclose your class name in quotes when passing it as an argument
  • your modal reveal function needs to change the display style to make it visible
Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Yes, it 'seems fine', but it doesn't work lol

But I did what you said, and still doesn't work. And What do yo mean returnsa a collegtion? So what is the other option apart orm query selector, or when do we use them?

here's the link anywas http://codepen.io/Aurelian/pen/ZLQeGP

Steven Parker
Steven Parker
230,274 Points
Steven Parker
Steven Parker
230,274 Points

A "collection" is a group of elements, not just one.

The other option that I mentioned was to subscript the collection to get a single element. For example, to get only the first element with the class "btn-modal":

var modalButton = document.getElementsByClassName("btn-modal")[0];

Also, when you use querySelector to find a class name, you must prefix the name with a period (".").

And you still have to do something about that "display: none" to make the element visible.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Oh, okay, so it's like jQuery with query selector, oh wait, jQuery probably uses query selector, thats why we need to specify the dot or hash tag.

I added the class, and now the overlay displays, but it doesn't have any color, I know it displays coz i checked it in the developers tool.

Also, i did , on click add style block when clicking the button.

Not sure why the overlay doesn't show, even though it is in the HTML after the click.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

It acutally shows, i had opacity 0 set manually .. thank you!

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Is there any tip on how could I improve thsi?