Transcript from the "Next Button" Lesson
[00:00:00]
>> Brian Holt: How are we gonna do this, right? We have, we know 12 images but we wanna make this flexible enough that if I add more images, I don't have to go re-write the code, right? That would be really nice if I could subtract and add images. So a really nice thing that we could do, is we could go grab all the images out of the dom, and then just work on that list, right?
[00:00:22]
In that way that number would always be correct. So why don't we do something like, let's go grab all the image tags or whatever, or gallery images, gallery,
>> Brian Holt: And we're gonna do document.querySelectorAll. This one, so this one is our query selector cuz we wanted one image, and this we wanna grab all of them, so we're doing querySelectorAll.
[00:00:52]
And we're do .gallery-image, right? Cuz that's the name of the CSS class that we put on there.
>> Speaker 2: It is like you have a typo in the there, galley instead of gallery.
>> Brian Holt: Yep, thank you. We could do pirate photos too. So, okay, so now what is gallery images?
[00:01:19]
Gallery images is node list, a pseudo array of image text, right. So when someone clicks next what do we have to do? We have to add a hide, something to hide this current image and we have to unhide the next image.
>> Brian Holt: So it'd be really nice if we had some sort of number keeping track of where we are in the list.
[00:01:49]
So let's go ahead and add something like that too. So, let currently selected equal zero, right? Because right now the zero with an element, the first element is selected.
>> Brian Holt: Okay? So the first thing we're gonna do is we're gonna say gallery images,
>> Brian Holt: At currently selected. So if a user clicks a button first thing we're gonna do is we're gonna hide the current image.
[00:02:20]
So that is going to be
>> Brian Holt: .remove("active"). Oop, sorry, .classList.remove, .classList.remove("active").
>> Brian Holt: So classList lets you add, remove Class is really easily from an element, and here we're just gonna remove the active element.
>> Brian Holt: In fact, if you want to, you can refresh the page here. If I click next, the only thing that's gonna happen is the image should disappear.
[00:02:56]
>> Brian Holt: So, good so far, right? About halfway there. [LAUGH]
>> Brian Holt: Okay, the next thing you wanna do is we wanna move currently select cuz like the user, click next, right? So we wanna move so the currently selected image is the next one. So we're gonna say currently selected, plus plus.
[00:03:20]
>> Brian Holt: And if you remember that is the same as, Currently selected equals currently selected plus one. Same thing.
>> Brian Holt: So now if this was zero before, currently selected is now one, right?
>> Brian Holt: So now we're gonna go to gallery, images [currentlySelected].classList.what. Exactly, add. All right, we're gonna add a class, and we're gonna add active.
[00:04:06]
>> Brian Holt: So this might weird you out. Line 11 here, I got currentlySelected. On line 13 I have currentlySelected. But remember between these two on line 12, I'm incrementing it, so the number changes there.
>> Brian Holt: So now if I refresh over here and I click next, it is actually moving the image forward, right?
[00:04:28]
That's pretty cool, right? I think it's cool. You can disagree with me. You'd just be wrong. Okay, so let us tackle our next issue here. If I click next, previous should light up, right, because you should be able to go back at that point, right. So, let's think about this for a second.
[00:04:52]
If someone clicks next, wouldn't previous always be available after someone clicks next, right? Because inherently, when you click next, that means there's always gonna be something previous to it, right? So, if I go from zero to one, that inherently means I can go back to zero because I was on zero and zero was a valid number, every time, a hundred percent of the time.
[00:05:11]
That's unexceptionally true. So, what happens if I do something like prevBtn,disabled = false. Now, you might be wondering, it's like what happen if I'm on five and it wasn't disabled to begin with. Well, this does no harm, right? It doesn't do anything in that particular case, that means it's totally fine to do.
[00:05:46]
You could do some sort of like false check to say, if prevbutton.disabled, then do only do it in that particular case, but it doesn't matter. So now hopefully if we click next, now you can see
>> Brian Holt: If I hit next, the button lights up now.