Hey, everyone, in this lesson, we're going to talk about CSX manipulation, so now things are going
to get more interesting because after some event happens, instead of just sending a message to the
console or something through the alert function, we're going to actually change the success of some
element.
So we have this button here, so let's work with it.
So we have this idea of color button that just copied this.
And let's go to Visual Studio Code.
So now we can just copy the code we wrote on the previous lesson.
So here we just use the UNCLICK event.
Let's copy this without the comment.
So like this controversy and now down here we can just based it.
So now the elements that we want to monitor events on.
It's called color.
Button, so when there's a click on this button, we are going to do something, so this time we are
not going to do the alert.
So now let's just copy this selection method, so get Element Bayada again, but this time, instead
of using an event or using the inner HTML property we've been using, let's just use the style property.
And now inside here, we have properties for all the CSF properties.
So if we want to change like the background color.
We can just do it like this and then type back.
Ground colour, so why am I not using the dot notation?
This is because I have a dash here, so this is not following the variable naming rules.
So I cannot use DOT for the background color.
I can only do it like this.
So then I'm going to change this property.
So let's just peak value like purple.
All right, let's save this, let's go back to our page.
So when we refresh the page, when we click on the button, we can see that now the color is changing,
which is really cool.
So let's go there and let's do some more see assess changes.
So this time, I'm just going to copy this.
And instead of changing the background colour, I'm just going to use the transform property, so if
you know success, you can change any success property from JavaScript.
So in this case, the transform is just following the variable naming rules so we can use the dot notation.
So dot.
Transform.
And then just like we would write on the success, let's try translate X, so let's move the element
to the left or to the right.
So in this case, let's move it 100 hundred pixels to the right.
So let's save this.
Refresh the page when we click on the button, not only it's going to change the color, but it is always
going to be moved a hundred pixels to the right.
Before we move ahead, just one thing that I want to show you.
I just mentioned that since this property does not follow the variable naming rules because it has a
dash, so we can only use the braces, but we can actually use the dot.
And use the lower cammo case, so if you do back.
Ground.
And then after the dash, every word should start with upper case, so background color just like this.
Let's save this.
Let's see if this works.
Let's click the button, we can see that this is working.
So this is just a workaround.
So if you have a CSX property called font size, you can use the DOT notation just by doing font.
Sise using the lower cammo notation, so I just wanted to show you this, and now just one less thing
before we move ahead is that we can actually simplify this code.
So I'm just going to copy this for now.
I'm going to comment all this code.
So this is one way of writing it.
So let's based it here and let's just try to simplify this code.
So as you can see, we are repeating this.
So here we select the element, we select the element again and again.
And we know that Shava script is a verbose, which means that we need to write a lot of code to get
things done.
So this is a very long statement gat element by and then the idea of the element between parentheses.
When I was starting out with JavaScript, I was a bit annoyed by this because the statements were very
long.
But we can actually simplify this.
So since we just selected the elements and we are setting in on claque element on it.
When we go inside it, the element that is getting the event, which is this one, can be changed to
the this keyword.
So this.
And here we can also use.
This so the element that's receiving the event can be called inside the function as this, so let's
save this and let's see if this is going to work the same way.
So now I'm clicking on it and we can see that we have the same result.
So this is one way of doing it.
And I'm going to show you a different way, because sometimes we want to apply a click event to an element,
but then inside here, we just want to change another element.
So there is another way of doing this.
So let me just comment on this.
And now what we can do is just creating a variable called button.
And we are going to select this element.
So now that we did this, we can just use the variable name so we don't have to call this method every
time, so now we can just use the name of the variable.
So button dot unclick and then we can just do button that style, button that style again.
So this is another way of doing this.
Let's save this now.
Refreshing the page and clicking on the button.
We can see the same result.
So let's try something different now.
Instead of using the on click button, let's just use the.
On mouseover.
So let's see how this is going to work now, so button that on, Miles over, let's save this.
Refresh the page, so now we have the button when we covered the cursor over the button, we can see
that now the event has been detected and our function has been executed.
So this changes everything we've seen so far because now we can monitor events on our page and then
we can just send messages.
We can change the success of any element.
So this means that we can open and close menus, we can pass photos on a photo slider, we can expand
our collapse sections.
So this is the starting point of something that's going to be really, really cool.
So that was all that I wanted to say for the moment.
In the next video, we are going to learn a few more get element methods of see you then.