Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

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
220,937 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

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
220,937 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

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

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

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Is there any tip on how could I improve thsi?