3 JavaScript Projects for Beginners

4.3 Programming the Number Buttons

Hello and welcome back. In this lesson now that we've got our calcTotal function working, we're gonna get started on all of our click events for our buttons. So we are picking up where we left off in the last lesson and you can find the URL for the starting code pin for this video, in the coach notes for this lesson. And once you've opened that up, let's go ahead and click on Fork to create a new copy of it, and we'll get started on this new copy. And for operation, we wanna set that to undefined as well, there we go. And then we're gonna rundown to the bottom here and for calcTotal, we're just gonna get rid of that, cuz we don't wanna call that calcTotal method until we actually need it. So let's jump into our btnNumber click Event. So this is going to affect all of our number buttons as well as the decimal point. Again, it's not going to affect the plus minus button, we're gonna take care of that one later on. But this will take care of any button that will add to this string up here in our input. So remember as we're clicking on these numbers, there are two possible values that we could be potentially editing. We could be editing the total. If this is again the very first time we're entering a number, then the number we're entering is in effect the total. Or we could be editing the current number. So if we hit 10+5, then when we hit 10 that's gonna be the total, we hit plus 10 is still stored in the total and then whatever we punch in next is gonna be stored in current number so if we hit 5, that 5 will be stored in the current number. And the editing variable that we mentioned before keeps track of which number we're currently editing. And we're going to create the logic for keeping track of that inside this click event that we're about to populate. And so we wanna keep track of that and it's gonna be set either to numbers.total or numbers.current. So we're gonna go inside this click event for our btnNumber variable here, these are again, all the buttons that have numbers on them and it's also the the decimal button. So the first thing I wanna do, when I click on one of these buttons is I want to store the actual digit that we just clicked on. So let's create a new variable here called newDigit, and we're gonna set that equal to the text of the button we just clicked on. So the button we just clicked on, we can access and jQuery by putting this inside the parentheses of a jQuery selector and then if we want to access the text of that button we just say .text open close parenthesis semicolon to end our statement. So we're storing wherever new digit we clicked on either 0 through 9 or the decimal place, we're storing that in this new variable. And what we do with that variable is gonna depend on which number we're editing, whether we're editing the total or the current number variable. And either way, that digit is gonna end up up here in the input field. So if we're editing the total, then we're gonna be updating the total variable, if we're editing the current number, we're gonna update the current number variable. So we need to first check after we store our new digit in this variable, we're going to check to see if, and remember we have this variable called editing. We're gonna see if that is set to numbers.TOTAL. So we'll be editing the total, only if this is the first number we've entered in. If the page has just loaded or if we have clicked the clear button, then we will be editing the total, otherwise we will be editing the current number variable. So we will include an else as well to account for when we are editing the current number which is gonna be most of the time. Most of the time we are gonna be editing the current number, but initially we'll be editing the total. Now another thing to keep in mind is we have the startNew variable. And as we mentioned before the start new variable is gonna keep track of whether we're about to start entering in a new number, or whether we're just continuing on with a number we've already started entering in. So if start new is set to true and when we hit one of our numbers, it will replace whatever is in the text field already. However, if it's set to false, if we're not starting a new number here, then when we hit 5 for example, it will simply append that number, to the end of whatever number is currently in the display. So initially start new is gonna be set to true because when the page first loads, we're gonna be starting with a brand new number. So whether we're editing the total number in the initial part of this if statement, or in the else statement, where we're editing the current number. Either way, we need to check and see if start new is set to true, because whether it's set to true or false, we're gonna be doing something different. So inside the first if, we're also gonna see if, startNew, then we're gonna do one thing, else, we're gonna do something else and then we're gonna have the same logic inside the else statement. So if startNew, that's gonna be pretty easy. All that means is we're starting a new number here, so whatever number we press is simply going to replace whatever is currently in that text field. So for editing numbers.TOTAL, then the total here is going to show up in the text field, otherwise the current number value is gonna show up in the text field. So again, if we're editing numbers.TOTAL, and we're starting a new number here, then we're gonna set our total= this newDigit. So whatever button we click on, we're gonna set our input field equal to that number and we're gonna set the total variable equal to that number. But then we also wanna make sure that we turn starting new off, because now that we've hit the first digit of our number, we wanna make sure that our second digit will be appended to the end of it and that it won't just replace it. So after we set total = our newDigit, we also need to set startNew to false. So all of this is gonna be exactly the same down here if we're editing our our numbers.current. So if startNew we can just paste this except instead of setting total equal to the new digit we're gonna set currentNumber = the newDigit. So just as a reminder next to this else statement, we'll just say if editing currentNumber. Just kind of this a reminder that that's what the rest of these black is for. Now the else statement if gonna be a little bit tricky here because we have to account for our decimal point. But before we get to that, let me just show you what the easy version would be. The easy version would be, if we're editing numbers.TOTAL, then if we're not starting a new number here, we would simply append whatever digit we just pressed to the end of our currentNumber. So we would set = total + whatever is stored in the newDigit variable. Now remember, this is not addition here, because these two values are not numbers. They look like numbers but they're actually strings. So when we add one string to another, it's not gonna recognize that they're both numbers instead it's just going to append whatever new digit we just typed into the end of the current string. However, this isn't gonna work quite right, and we'll get to that in just a minute. For now we'll leave it as is, and we're gonna do the same thing down here. If we're not starting a new number here, then we're going to, again for editing the currentNumber, we're gonna set currentNumber = currentNumber + our newDigit that we just entered. Then, regardless of which one we're editing, we're gonna make sure we update the text display, to reflect what we just did. So after our if, else for startNew, but still inside the if for editing numbers.TOTAL, so we've calculated the new total, now we need to display them. So remember we have this variable called txtDisplay, which is our input field at the top that has our numbers, we're gonna say txtDispaly.val and we're gonna set that value equal to the total that we just came up with. So I'm gonna copy that and we're gonna do the same thing in the else down here, except instead of the total we're going to be editing the current number. So let's try this out. Let's start entering in a number and let's see if this works will hit 7, sure enough a 7 shows up there. 8, all right, so pretty good. So the problem we have with this is if I type a decimal here, type a couple numbers and then hit decimal again, you'll see we now have two decimal points and that doesn't make any sense, that's not a real number. So before we get any further, we need to make sure that there isn't already a decimal point in that string somewhere. So we're gonna need kind of a complicated if statement inside the else statement. So this is if we are currently if startNew is set to fall so we've already got a few digits out there and we wanna make sure that if we press the decimal key or the decimal button, we wanna make sure that there is not already a decimal in the number before we allow that button to register. So let's take a look at what that if statement would look like. We only want to update the total here, if we either we didn't press the decimal place so we pressed any of our numbers then it's fine to go ahead and edit that or if we did press that we wanna make sure that it doesn't already exist and our string. So here's what our if statement is gonna look like. So first of all, we could say if newDigit is not equal to a period or a decimal, then we can go ahead and run this or, and we'll put the rest of this in parentheses, if newDigit does equal a period and then we are gonna look at the total, the current running total, so whatever is stored in this field. So total. And we are gonna look to see if there is already a period in our string. So the way we look for that, is we can say index of, you can use this on a string. And we're looking for the index of a period. Let me stretch this out a little bit, so it's all on one line. And this index of is basically looking for this is string, inside this string, and it will give you the index. So if you have a string with three letters in it for example, the index's first letter is 0, the index of the second letter is 1, index of the third one is 2, etc, etc, etc. So if that character does not exist in this string, then the index will be a -1. So we wanna make sure if we click on this decimal place, we only allow the total to be updated if there's not already a decimal place in that string. So we wanna make sure that the index of decimal is = a -1. If it is equal to -1, then it's not in that string, which means we can go ahead and update the total like so. So now we're gonna do this exact same thing run the same if statement down here, in the else statement. So when starting to set to false, we're gonna run it down here as well and we'll put our closing curly bracket after that, and then nudge this over, and we're gonna check to see if currentNumber, Already has a period in it. If not, if there is no period in it already, then we are going to allow to add that period. So let's see if this works. I'm gonna hit 123.56 and then point again, and we see that it does not allow me to enter a period the second time. So that works really well. So that's really all we need for our number click event, we're now able to enter in numbers, but we still have operations. We have the clear button, the positive negative button, the equals button and all that good stuff. So we'll get started with a rest of those in the next lesson, let's save our work and I'll see you then.