This is going to be a super quick lesson on how to execute a function from an HTML element.
Now, typically you're going to there's a lot of better ways to do this, especially when it comes to
the dorm and selecting elements and then adding event listeners on elements directly using JavaScript
in interacting with the dorm.
But in this case, we haven't gotten that far yet.
And we want to have an introduction to adding functionality into HTML elements such as buttons.
So when you click a button and invokes a function and essentially this is a quick and easy way to do
this, where you add an on click event as an attribute within your HTML element and then you have the
JavaScript code.
And in this case we're invoking function message one, message two, message three.
In some cases you might still see this and often you won't because we're trying to separate out the
HTML and the JavaScript.
So go ahead and try this and add this into HTML.
So selecting a button, adding an on click and then invoking functions, giving a message, one message
to an message three and you can put them in the console.
We can have various counters that increment.
So every time one of the buttons is clicked, it will increment the counter accordingly and then output
the message and the console with all three values.
So go ahead and set this up and I'll walk you through it coming up.
So opening up our Ed, we are going to have to open up the HTML file, and in this case, we need to
add some HTML and that's going to be some button elements.
So it's on Click and then you invoke the function that you want to invoke whenever the button gets clicked.
So we've got our button, one button to add button three.
So whatever happens, it's going to happen directly here, the set of counters.
So a number of different variables.
So declaring variable and var to anvar three.
So declare the three variables and then take var one and var to Anvar three and we're going to equal
all of them to zero.
And then whenever this message gets clicked, let's take var one and will implement it and then output
another function that's going to take care of our console message and we can duplicate out these functions.
So two and three.
So those are all going to increase depending on what button gets pressed.
And then lastly, let's do our function.
That's going to contain the message.
So for the message, this is where we're outputting the console.
We're not passing any arguments onto here console log and we're going to output the values of our one
and then concatenate it with to and of our three.
And a quick refresh.
So now every time these buttons get clicked, you're going to see that we've got the console messages
increasing and we've got kind of a mini counter going on, depending on which button is clicked.
That's going to increment the value accordingly.
And we've got the content going into the console.
And coming up, we're going to use some of this functionality to produce some more interesting stuff
with functions.
So that's still to come.