Hello everybody. Welcome to the JavaScript course.
In this video I'm going to discuss the change of input. So we have two events to handle the
situation of ... of change of event. The first one is called the change event. It is triggered when an
input is finished. The other one is called input event. It is triggered when an input is altered by
any means, including the mouse action and speech recognition. Now let us see the HTML file first.
The HTML file has a number of elements. First, I ha
ve a title here. And in the body part, I have a
number of things. I have some headings, and input box, and a form actually. And I have also some
divisions to show some prompts later on. I have to link my JavaScript file to the HTML file. The
file is called myScript.js, which is put in the js folder, okay. Now let us go to the JavaScript
file. In order for me to use the strict mode, I have to say "use strict" on the first line of
the JavaScript file. And then let us talk about the change eve
nt first. It is triggered when
an event is finished. That means when I have finished entering something into the input box,
for example, the change event is triggered. But it is not triggered when element is just receiving
input. So the word "finished" here is that when the element leaves its focus or the focus is blurred,
then we can say that the input is finished, okay So let us see an example. I have already uh picked
up the two elements by using the get element by ID method. The first e
lement to pick up is
the input box shown here, okay. And the second element to pick up is the
division called some prompt, okay So how can I handle the change event with
these two elements? Let me show you my way now. Now I want to add an event listener to the
input box. And the input box is trying to listen to the change event. So if the change is done, that
means when the focus is lost for the input box, then I do something indicated by an anonymous
function. I have to pass and event obj
ect into the argument of the anonymous function. And then
I want to say something in the prompt section, which is the division shown here okay. So the
inner HTML is changed to something else. I want to show the value obtained in the uh input box.
That's why I can take a look at the change event to see ... see the content obtained, okay. So let us
see the result. Save, reload. So I type something here. So you can see that the focus is still on the
input box. So that's why the change isn't co
mplete I have to make sure that the input is finished by
losing the focus of it. When I click somewhere on the web page, the focus is lost. And you can see that
the content can be shown up here. I have typed the characters shown here; a, b, c, d, e, f. And when the
focus is lost, the change is really triggered That's why I can show the content of the uh my
input box, okay, which is just referring to the value of it. Okay. So we have to take a look at it.
Uh the input has to be finished. Tha
t means when it is still receiving input or when the focus is
still there, it is not counted as a change yet, okay The next event to consider is called an input
event. How can it be triggered? It is triggered when the input is altered by any means, including
the mouse action or the speech recognition tools, okay. So I have an example shown here. I want to use
the radio buttons to demonstrate the input event So it is not always in terms of of uh the keyboard
action; it can be just the mouse
actions that can trigger the input event, okay. So I have already
picked up the form shown here. And in the form I have a number of radio buttons together with the
labels, okay. So my form is obtained by using the get element by ID method to obtain the uh form
with ID called some form. And also I've already captured all the uh radio buttons using the query
selector all method to indicate that the input is of type radio. so I'm able to collect this input
element, this input element, and this
input element as well. So they are stored in a collection
called my radios, okay. So you can see that it is a list of elements. And the division called
some prompt 2 here is also captured by using the get element by ID method, okay. So how can I
demonstrate the input event? Let me show you my way now. Okay, you can see that I have already
got some code here. So I want to listen to the input event on the form itself, rather than
on any single input radio button, okay. So I want to do someth
ing like this. I want to loop over
the my radios collection to see that which one of the buttons is really clicked. If it is
checked, then that button would have a value of "true" for the checked uh property, okay. And then
I want to say that that particularly checked button is really checked. So I want to show the
value of that particular button, okay. The value is shown here for the first radio button. It is
just "Choice one". For the second one, it is just "Choice two". For the third one
, it is just "choice
three", okay. So the value which is this string will be shown up on the uh division, okay. So let me try
to do it. Save, reload. So I click on any of the buttons, for example the second one. So you can see
that choice two is checked. That means I'm able to pick up the radio button really checked. So the
second radio button has a value being true for the checked property. That's why I can go to the
value of that particular radio button. And then I can capture "Choice two
" as the value. And then I
print that value uh on the screen, okay. So when I click on another button, you can see that
choice one is checked. That means the input event is able to consider the mouse action as
well, rather than just for the keyboard actions, okay. So this video has already talked about
the change event and the input event. For the change event, it is triggered when the input is
finished by leaving the focus or by completing all the uh input. And for the input event
it's tr
iggered when the input is altered by any means, including the mouse action or the
speech recognition. Of course, the keyboard input is also included. This is the end of
the video. If you have any questions about my video, please leave your questions on the
comment section below the video. If you like this video, please give me a like and please
subscribe to my channel. Thank you for watching
Comments