Checking for Numbers

Quick reference

• 00:04 In the last video, we generated our random numbers and
• 00:07 created the form where a user can type in their answer.
• 00:09 Now we'll build out what to do once a user clicks the button to submit their answer.
• 00:13 Looking back over our list of things to do,
• 00:15 the next thing on the list is to compare the user's answer to the correct answer.
• 00:19 But to do that,
• 00:19 we need to be able to grab the user's submitted answer from that form, right?
• 00:23 So we've done this in the past when we've looked at the form validation.
• 00:26 So let's just write a real quick script, but let's put it right under our form.
• 00:29 I'm just gonna paste this in here, and we're gonna look through it here.
• 00:35 I'm just calling a quick function, userAnswer and it's just gonna grab by
• 00:40 element Id answer which is our ID input field, and it's gonna grab the value.
• 00:45 And then we can output it to the output ID.
• 00:48 Now we don't have an output ID yet, so we should probably make that.
• 00:52 We can just paste this in here, and it's just a p with an ID of output.
• 00:56 Now we need to make sure this button does something.
• 00:58 For the submit button, I'm just gonna do an on-click.
• 01:00 We know how to do this, and I'm gonna call this userAnswer function,
• 01:03 which is this function.
• 01:04 Okay, so let's go ahead and save this, come back here and hit reload,
• 01:08 our answer is four, it puts it there, 45, it puts there.
• 01:12 It seems to work, but there's a little bit of a glitch.
• 01:14 So if I come up here and I type in the word banana and submit the answer,
• 01:18 it goes through.
• 01:19 Now we wanna deal with numbers here, right?
• 01:21 So we kinda need to make sure this is the valid number or
• 01:24 else things might get a little weird.
• 01:26 This is sort of a method of form validation.
• 01:28 Remember we talked about form validation and the question is,
• 01:31 is there a way to determine whether the thing is a number or not?
• 01:34 And there actually is, JavaScript has a built-in function called isNaN And
• 01:39 it's just isNaN, and that stands for is not a number, is not a number.
• 01:45 And this is a little bit weird, so banana is not a number.
• 01:50 Is this not a number?
• 01:51 Yes, banana is not a number.
• 01:53 So this will return true whenever a thing is not a number.
• 01:56 Which is sort of counter intuitive, you wanted to tell you, hey,
• 01:58 that's not a number.
• 01:59 You don't want to say true, it's not a number.
• 02:01 You wanna say false, it's not a number.
• 02:03 It's not a number false, right?
• 02:05 No, this works the opposite way, it returns true, it's a Boolean, true or
• 02:09 false and it returns true if it's not a number.
• 02:11 So let's try this out, we can just come up here to our second line of code.
• 02:16 And instead of outputting the answer that the person put in, we just do this,
• 02:20 this is how you use it, you call the is not a number function and
• 02:23 inside it you pass the value.
• 02:25 So if we come back here and hit reload, and I type in hello and
• 02:29 submit my answer, we're gonna get true.
• 02:31 True, hello is not a number.
• 02:33 If we submit five, we get false.
• 02:36 Five is not, not a number, right, so it's kind of weird.
• 02:40 Let's write some quick logic here.
• 02:42 And I'm just going to go, if our user answer is not a number then output.
• 02:48 We're creating a new variable called output, and
• 02:50 it's gonna put this little message, hey, that's not a whole number, or
• 02:54 that's not a number try again, if the answer is not a number.
• 02:57 Else, I'll put the answer.
• 02:58 Now we've created this new variable.
• 03:00 So I'm gonna come up to the top of the screen, I'm just gonna var that out.
• 03:04 Now down here on our last line of code, I'm just gonna change that to output.
• 03:08 So if we save this, come back here and hit reload, and type in, I don't know.
• 03:14 Hey that's not a number, try again.
• 03:16 Four, four, and it just outputs the number.
• 03:18 Okay, so we've got the ability to enter and answer.
• 03:21 We can check to make sure if that answer's a number or not.
• 03:24 In the next video,
• 03:25 we'll figure out whether our answer is the correct answer or not.
• 03:28 We'll do a little bit of logic there, and finish up the rest of the app.
• 03:31 So that's all for this video.

Lesson notes are only available for subscribers.