Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
This final video shows one solution for switching through different pages of data using the event listener.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up