Hey, let's get our next and previous buttons functioning.
I'm also going to downplay the number of results that are being returned so we're not getting that many
results within the page.
So within our page, we saw that we get return back these tokens for next and previous and we can use
these tokens within the USL, under the.
Paige tokin equals to to set the page that YouTube is going to return back because there are a ton of
different pages that obviously can be returned back for any given term.
And the way that we can add this and where we can add this in so we can add that over here within this
function, whenever before we're returning the data, we can have some conditions with that data and
using data and checking to see if previous.
I'm going to go back to here.
We've got next page token and we don't have previous ones.
So we've got next page token in this case.
So checking to see if previous.
And then there's also previous page token.
I believe it's like that will double check that.
So if there is a previous page token, then we're going to take the button.
Previous.
And we're going to add a value of tokin to that object and the value that's going to be added in is
going to be whatever this previous page token is.
And if it doesn't exist, take previous page token and we're going to just set that to false.
So that doesn't exist.
There's nothing there.
So boolean value.
Another thing, too, that we wanted to add in as well is what's our button previous and update its
settings where we're going to actually set, attribute and attribute that we're going to set is disabled
here.
And in this case, because there is a previous page token, we're going to set that to false because
we don't want it disabled.
So this is actually going to be the opposite of what we set out to initially.
True disables that false doesn't disable it.
And down here, if there's no page token, then we want to set up to try and copy this and we're going
to do the exact same thing for next as well.
So checking to see if next page token exists.
And if it does exist, then we're going to update all of these values or a token under button next.
Otherwise we're sending it to false and we're also disabling it.
So if it's doesn't exist, then it's just going to be set to false.
And if it does exist, then we're going to set that data token there.
And actually we can just take the disabled and set this to true or false.
So this is another way to write this taking button next disabled.
And also we're going to do the same thing here so we can set it to false.
So we've added in that attribute already.
And just do a quick update for this one as well.
So disabled to force, disabled to.
True.
And I think we're ready to try that.
So let's refresh, do a search and go down to our button.
So next is enabled.
So that's that button down there.
Make it bigger.
And I'm also going to change this to only return back for results.
So search next.
And there's our button next and we'll see what happens.
Is that a set of values that's been returned back there and next again.
So we are actually not not moving next because we need to add that in, of course.
But we do get the data token whenever we're processing next.
So you see that token is being presented there.
So next that we need to do so.
That's coming into the console here.
We need to see if there is a token and then we're going to update that to the end of the string, to
the end of the URL, to a number of different ways to do this.
We can update the URL to be let that value possibly, and then check to see if there is a value there.
And if there is, then we're going to take the Eurail and we're going to add to the URL.
And what we want to add to the URL is that token and equal, that page token to be whatever the value
here is of the event target token.
Now when it goes to the URL, the page token is going to be in there if it's available and if it's been
pressed from next or previous.
So we can try that and press search and then now next is going to return back the next set of results.
And we should also see that previous is available.
So that previous brings us back to that first set of results.
And of course, we might want to clear out the results if we want.
So that's another option that we might want to do instead of having them constantly stuck on top of
each other.
Whenever we're outputting the results, we want to clear out that element that's outputting the results.
So instead of having output, have some content, we can take output and we can set its inter HTML,
the service, enter each table and just keep it blank.
So now every time we search or if we hit next, it's going to move to the next and the previous.
So go ahead and set that up and I'll do a quick run through of the code coming up.