Our calculator now shows numbers on its “screen,” but it doesn’t calculate. It’s easy to calculate with JavaScript. We just say number + number = answer. It knows how to add, subtract, multiply, and divide. It knows how to do the calculation. But what does it need to know in order to do the calculation?

The trick is that it has to know the numbers involved and the operator you are choosing. We just wrote them on the screen. The computer doesn’t know what we chose. It didn’t hold onto each choice. Each lesson we’ll do a little more, and a lot of the time, we’ll be undoing or changing what we did before. That’s the process of coding, fixing problems.

We solved the problem of needing keys to press. Then we solved the problem of being able to press the keys and have them do something. The more you can foresee what problems need to be solved, the fewer changes will need to be made later, but you will always be making changes. You will never create code of any substance the first time without changing something, probably lots. It’s part of the process.

So we need the computer to hang onto the first number pressed, the operator pressed, and the second number pressed. We can hold onto the operator pretty well. When they click on it, we write that operator on the screen and we can define the operator with the same symbol. We can make a variable called op, short for operator, and label it with whatever was clicked. When plus is clicked, it writes + on the screen, and then it defines op = “+”; op now equals the plus sign.

When we go to do the operation, if op equals “+”, we’ll tell it to add the numbers together. Now the numbers are trickier. We can’t say if they press the 1, call that the first number. What if they pressed 2 first?

We’re going to use a handy thing called, “this.” You can tell the computer, get “this” one, whatever they clicked. Very convenient!

We wrote our “onclick” commands like this last time.

document.getElementById(“num1”).onclick = function write1()

{ $screen.append(1); }

We used JavaScript to write $screen with short hand. Let’s do that for our click.

$(‘.number’).on(‘click’, function() { …code… });

Notice it closes with a curly bracket and a parentheses.

The above code says that when something with the class of number is clicked, do this function. Then we’ll write in the curly brackets the things we want to happen. For starters, we want to write the number on the screen. We assign the variable numberPressed to whatever html is in “this.” Then we tack on the numberPressed to what’s already on the screen.

$number.on(‘click’, function() {

var numberPressed = $(this).html();

$screen.append(numberPressed);  });

Now we don’t need any of the code we wrote about id 1, etc. You can delete them or comment them out. When you are changing code, it’s smart to comment out your old code instead of just deleting it. If it doesn’t work, your old code can easily be restored.

To comment out in JavaScript, we have two methods. We can use // to comment out a single line. And we can use the same as CSS to comment out a block. Just wrap the whole thing in /* comments */.

It’s also smart to use the // comments to label what your code does. While you are writing it, you know what each function does, but you don’t want to have to figure it out when you come back to this code in a few years because you want it for some other project.

This code shows using “this.” It shows one of the commenting methods.

Then you need to close out the function with });

Those two lines of comments could also be written like the code below.

/*When someone clicks on a number, it saves the number to do the math. */

You can watch this lesson.