Great, you made it to try and catch a lesson in this lesson we are going to be looking at try catch
and this gives us the ability to try different blockquote as well as catch any errors, throw custom
errors and then execute code so it using final.
So these are very useful when you're writing functions and you've got some values and you're not sure
what the result will be.
So let me take a closer look and show you within what can be done.
So it marks a block of code statements.
Try specifies a response exception.
So I've got a simple example here where we've got try so it's got non existent function and it's going
to throw an error because, of course, this function doesn't exist and that's going to log that error
into the console.
So it's a really great example of it where we can customize the errors on catch and output.
That error information so non existent is not defined.
That means that we tried to execute this function and we had an error.
So that's where catch came.
And also extend on that as well, where you've got finally so you've got another option to run the code
using finally as well.
So let's take a closer look and I'll show you a little bit more about it and let's create an element
for the page.
So create an input area.
And for this input, then we can grab the contents of the input when the button gets clicked.
So let's set all of that up.
So using document and of course, create element in order to create the element in this case, we're
creating an input and then taking that element and we're setting an attribute.
And the attribute that we're setting is the type.
And set it as text and we can console logout the element just to make sure that everything looks good.
So got our input text next we should add it onto the page.
So using document body append child and the child that we're pending is the element.
So now we've added it to the page.
Let's make this bigger.
And of course I could have just done with this with each HTML, but this is a JavaScript course, so
any opportunity we have to practice and do it with JavaScript.
That's what we want to do.
So let's also select our button to document and query selector selecting the button element.
So it's just a button with the JavaScript there and then we can use a button and we could add an event
listener to that button.
So listening for a click on the button and if the button gets clicked, then we can invoke a function
what is called this next, create the function that's going to get invoked and will console log out.
Yes.
So usually when I create these things, I like to just make sure that everything is working properly.
So it is working.
We can also get the contents of the elements so we can do element value.
So I'll put that into the console.
So because we are going to need to work with that.
So that element, object value, you can see as I update the value, the value update so we can utilize
that within the code.
So what we want to do, so we want that actually to be a number and then this is what we're going to
try and we're going to test against.
So we're getting that element value and also let's set a default value for this.
So don't always have to keep refreshing.
So do value.
So coming into the Testor function, we're going to have try and checking to see if NUM is equal to
nothing.
If it's empty, then we're going to throw an error and no value because we're throw you can set custom
error messages and then of course we need cash in order to catch those errors.
So it's taking in that as a parameter as error and we're outputting it into the console.
Whatever the error messages will just output into the console.
So refresh and that's working.
If we have no value that we throw no value within, they're also going to get rid of the console of
that.
So it's all fine whenever there's a value in there.
If there's no value, then you see we get this error message of no value.
Let's try a few more and we'll check to see if it's a number.
So to make sure that it is actually a number.
And if it's not, then we want to throw an error because we want to make sure that this value is a number.
So not a number or should be digit.
But so if we have testin here, we see we get not a number.
If we have blank, we have no value.
If we have a no, everything's good.
We can continue.
So let's convert it into a number in case that was the problem.
And then check to see if the value of NUM is greater than five and if it's not, then we can say over
five and it's actually over five.
So it is over five.
That's the error.
And we can also do the other way.
We can check to see if it's less than five.
And then throw an error under five, because maybe we're expecting something more so over five and under
five.
So now we've got ability to catch a bunch of errors.
And then also let's add in finally.
So finally, let's us just execute code and we'll just put into the console.
This will always run.
So this is a block that will always run.
So it doesn't matter if we have any errors.
We always see that running.
So does it actually matter what happens within the try and catch?
Finally will always execute.
You see that they're in the bottom.
So extending on what we just saw.
What I want you to do for this lesson challenge is to multiply it input field by 10 on the press of
a button, provide an error message to the user if the input is not correct format and clear the input
value each time that the user runs or execute invokes the function.
So go ahead, pause the video, try this one out.
And this is a little bit of an extension on what we just did.
A walk you through the solution coming up.
So it's got this block of code and I'm going to simply I'm going to duplicate some of it because a lot
of this Testor function is going to be the same thing, but will call it something different.
Well, we'll call it calculate or something like that.
So we've got our calculation and now that's going to get invoked whenever we press the button.
So let's update this where we've got the value that we're taking from the input.
So we still need that.
And we're checking to see if the number exists and if no no value.
We're also making sure that it is a number.
And if everything is good, then we're going to update the output value in the console.
And we do have a div existence.
So document and query, select and update the text content of the div to be whatever the number of times
ten is.
So output that for the user if there is an error instead of outputting in the console, let's output
the message to the user, the error message, and then we need it to reset the value of the element.
So we always want to reset it to be blank so we can do that as well.
So let's try that.
And we see we get a value of one hundred and this time we get a value of fifty and we see it always
updates.
So let's try the error messages.
So not a number.
And the other one was if it's blank, so no value.
So we get the error messages or we get the calculation.