Preview
Video Player
00:00
00:00
Solution: Trigger Page Changes
3:06This final video shows one solution for switching through different pages of data using the event listener.
Ready to finish up?
0:00
We only have the EventListener left.
0:01
Let's do it.
0:03
For Step 8, I've created
a variable named activeButton and
0:04
set it equal to the button that
currently holds the active class.
0:08
I did this using querySelector
on the pagination list.
0:11
To help with step 9, I stored whether
the user has clicked a button or
0:16
not in a variable named buttonClicked.
0:20
I use the closest method here on the
event.target with button as the argument.
0:22
This ensures the user can click in between
the buttons without triggering the event.
0:27
If you're unfamiliar
with the closest method,
0:32
definitely check out the link
in the teacher's notes below.
0:34
It's a very useful tool.
0:37
It works similarly to querySelector
using CSS selectors, but selects
0:39
the element if it matches or the closest
to the answers that matches the selector.
0:44
If it finds a match,
it will return that element.
0:49
If it doesn't, it returns null.
0:52
This allows me to type my conditional
as simple as if buttonClicked.
0:54
If the user clicked on the button or
a child of the button,
0:59
it will see that element, which is truthy.
1:02
And if they click the space in between or
the background, it will be null,
1:04
which is falsy.
1:09
If that condition is true,
1:10
I remove the active class from
the button that currently has it.
1:11
I then add that class to
the button we just clicked.
1:16
And to finish everything off,
I call the showPage function parsing in
1:18
our author's array and the innerHTML
of the button we just clicked.
1:23
Let's check that everything
is working in the browser.
1:27
Now, if we click on our other
pagination buttons, the page displays
1:31
the correct author cards and the active
class is set to the new button as well.
1:35
Real quick, I'm gonna go comment out that
line I mentioned earlier to demonstrate
1:40
why we needed it.
1:44
If I refresh and click on page two now,
1:45
you'll see the initial
cards are still there.
1:48
If I click back to page 1,
duplicates are even added.
1:51
This is why we want to completely wipe
out the author container's content every
1:54
time we call to show a new page.
1:59
I'll uncomment that line before I forget.
2:00
What's great about all of this
is it is completely dynamic,
2:04
meaning we can simply change our authors
per page variable up top here and
2:07
everything will still work perfectly.
2:11
Let's try four.
2:13
Now, we have four authors displayed and
only three pagination buttons.
2:22
You can even further challenge
yourself and add in a select menu,
2:26
where the user can change how
many authors per page themselves.
2:30
So was your approach to solving
these different from mine?
2:34
If so, that's perfectly fine.
2:38
There are always multiple ways to
reach the same outcome when coding.
2:40
As long as it's working as it needs to,
that's great.
2:44
This was a lengthy and difficult one, so
2:48
don't be discouraged if there were
parts you couldn't figure out.
2:50
Now that you've seen my approach,
you can try it again on your own.
2:54
I hope you feel better about pagination
and DOM manipulation in general.
2:58
We'll see you next time.
3:03
Until then, happy coding.
3:04