Check out a free preview of the full Using JavaScript in Websites course

The "Image Gallery Q&A" Lesson is part of the full, Using JavaScript in Websites course featured in this preview video. Here's what you'd learn in this lesson:

Brian answers a student question about the add method.

Preview
Close

Transcript from the "Image Gallery Q&A" Lesson

[00:00:00]
>> Speaker 1: So up at the top, when we did the query selector, we used dot prev, dot next to get that class name. But then, down inside of the event listeners, I was saying remove and add dot active. I didn't get any errors cuz-
>> Brian Holt: I mean,
>> Brian Holt: That doesn't do what you want it to do, right?

[00:00:22]
[LAUGH]
>> Speaker 1: Yeah.
>> Brian Holt: Yeah.
>> Speaker 1: Well, that's the name of a class, so I have to put a period first. But apparently, not when you are adding and removing.
>> Brian Holt: Yes, so this is a good point to bring up. Let's just take a look at what it looks like in the HTML here.

[00:00:34]
Notice this is not a class called disabled, it's actually an attribute on the element called disabled. So this is actually something built into the browser. Because we often have to enable and disable buttons, right? So we could have just made this like a class here and called it disabled and worked with that and added the same style.

[00:00:54]
This is inferior to what we've chosen to do for two reasons. One, just like I was showing you here, I don't have to detect inside of my event listeners if this is disabled or not, because it will not fire events if it's disabled, right? And this works with inputs, this works with a bunch of stuff as well.

[00:01:10]
>> Speaker 1: I was talking about next and previous, which are classes.
>> Brian Holt: Right.
>> Speaker 1: So when I was trying to add and remove them.
>> Brian Holt: So when you were saying instead of saying classless dot add, you were doing something like-
>> Speaker 1: No, I had classless dot add, quote, dot active.

[00:01:30]
>> Brian Holt: Dot active, gotcha.
>> Speaker 1: Yeah, and that didn't work. But it didn't give me any errors, so I was like-
>> Brian Holt: That's interesting.
>> Speaker 1: And it confused me because up at the top when we did query selector, we did have to put the period.
>> Brian Holt: Yeah, it is kind of contextual in that sense, yeah.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now