So now that we've got something that looks like a calculator and we also have clickable buttons, we're
ready to move on to the next step.
And I know we got quite a bit of practice at creating elements dynamically.
And a lot of this was the same format.
And now you must be really familiar with creating elements.
So now let's create some interaction and functionality into those elements, surpassing that event object.
But we also want to know which element when it triggers that want to know the inner HTML of that element
so we can grab that information by using the this, the JavaScript, this.
So I see when we click the button and I'll make this bigger so we can take a closer look.
Whenever we click any of these buttons, we get the element that invoked the click.
So see, inside of that element we've got within the inner turmoil, we have the key that was being
pressed on the calculator.
So if we take this and if we do inner text and I can get rid of the event object, we don't need to
see that.
So we refresh.
And now whenever I click the buttons, I can see what character is associated with the button.
And these are string values as well.
So we can do some comparison and we can determine what the user which button the user is intending on
clicking, and that's going to give us the functionality that we want to do.
So let's set up a variable to contain that value.
We can just call it my value.
And this is the value of the button that was clicked, the same thing that's going into the console.
And now what we can do is we can output that value so we can have another container where we can update
the value that's contained within the inner HTML.
And another variable that we're going to need is the actual calculation.
So this is the value that's actually going to be sitting within the my output object.
And we saw that.
That's the one that we created earlier.
So we just grab that inner text from there and now we can take my cowl and we can equal my cow and then
add in whatever the my value is.
And then lastly, let's take the my output.
That's that same object and take the inner text and we're going to update it to be equal to Michael.
So see what happens now.
We've got one, two, two, three, five, six.
We've got the plus three, three, three all the way down.
And the one problem here is that we notice that we've got a zero in the beginning.
So we need to remove that zero now.
There is a way to do that.
And we can do is we can check to see if the value of my cowl is equal to zero and if it's equal to zero,
then let's remove out that preceding zero in front of it and my cowl and we're going to equal that to
just blank.
So it's just to two quotes.
So now whenever we type in the three, six plus, plus, plus, we can see that now we've got more of
a number because typically what's in the calculator don't see that zero going in front.
So go ahead and add this into your project and you're ready for the next part.
We're going to do the calculation and you're going to be surprised at how easy that is to do when we
do evaluation with JavaScript.