Oh, and welcome back, let's introduce JavaScript into the project, selecting the elements and adding
event listeners to those elements.
So setting up some variables, setting up a contest, and this is going to be the one that we can output
content message content to the user.
So using documents and query selector in order to select that element, selecting the element with the
class of output and then adding it in as an object in JavaScript, there's a few other variables that
we're going to need.
We're going to need to get the buttons so we can grab all of the buttons.
So just do that as BTE ends and query selector all for this one because we've got multiple buttons.
So selecting all of the elements that have a tag of.
But and then also we need to get the inputs.
So let's create another element and we can call this one, maybe we can call it get values or values
using document.
And this one has multiple elements as well that we need to select.
So using queries select are all selecting all of the elements with the tag of input.
So this gives us the ability to grab the elements and we're going to add event listeners afterwards.
Usually I like to check to make sure that I do have the elements selected properly and I use that the
console for this.
So see, when I output output, you see, it selects the element that is related to that object.
The Beaton's should return back a node list.
We've got four buttons.
You see that all of the buttons are represented within the node list as well.
We've got get values.
So this is a node list of three.
We've got three inputs that are contained in here.
Let's add in our event listeners.
So selecting our buttons, we're going to loop through all of the available elements in the node list.
So doing a four each and we can just select function and this can just have a variable name of B10.
So as we iterate through Allfirst all console logout BTM so you can see that we're actually going to
get all of the elements, all of the elements that have a tag of button, and that is actually all of
the buttons that are visible to the user.
So we want to add an event listener to the BTM.
So selecting the BTM object and we're adding event listener to that B10 object and then we'll distinguish
between the different buttons within the function.
So this is the button action and we'll create a function in order to handle that.
So going down just below, let's create that function button action and we're passing in the event object
and for now we can console out event object.
So now whenever I click one of these buttons, we get the event object I would put into the console
within the button action function where we've got the handling of the different button actions we can
check to see which one and which value actually was being invoked, where we can get the inner text
from the element if we want, as well as we could use the classes.
But the classes are just named buttons one, two and three, so they don't really provide the distinction
that we need.
You could also set that information into the class if you wanted to.
So selecting that element, we can get that current element value.
So selecting that event object and then the source element.
And now when you get source element that's returning back, that element information that's triggering
the event.
So this is a variable within that event object where we've got the source element.
So we're able to select the source element and then we can get the inner text that's contained within
that source element.
So that gives us the contents of the button that's being pressed.
And this means that we can check against that to check to make sure that we are getting that value correctly.
We're going to split this string as well, because we only need to know, set, get delete and all.
We don't need to know the rest of what's contained within that inner text.
So let's do a substring of that and we'll slice that at the index value so we can get that value.
We can call it temp.
So selecting this content that we've just outputted into the console, we can use substring, which
gives us a chunk of the string that we're returning.
So when I was starting position of zero and then what we want is we want to return back that substring
and using index of is going to return back an index value.
And this is where we're just going to have a space.
So return back index of space.
And you can see when you output index of space for that value, you're going to get a number being return
there.
And I'll also console log out the value of temp.
So now whenever we click one of these, you can see that we're getting an index value of three.
So we're returning back all of the characters from zero to three, not including three, the same thing
with get, same thing with delete.
So we're turning back zero.
One, two, three, four, five.
And breaking at six or turning all of those characters back, so that gives us a shortened value that
we can work with in order to detect which button has been clicked and then we can take different actions
depending on the button that was clicked.
So go ahead and set that up.
And coming up next, we'll add in the conditions as well as I want to set this default value for the
calendar entry as one week from now.
So I don't always have to select it.
So we're going to do that as well.
And that's coming up in the next lesson.