JavaScript change Event

The JavaScript change event is an event type that gets executed when the focus on an element is changed. The change event of JavaScript inherits all the methods and properties of the Event.

Here, in this section, we will understand and implement the practical use of change event over different JavaScript elements such as an input text, checkbox, radio buttons, select elements and so on.

For using change event on a JavaScript element, we need to add an event handler method for which we can use addEventListener() or onChange attribute of the element. The syntax for both are given below:

addEventListener() method

element.addEventListener('change', function() {
//statement codes
})

onChange attribute

We will discuss the JavaScript change event using both ways.

Using JavaScript change event on Input elements

There are different input types for different elements such as textbox, radio button or checkbox. When you give input and then moves to another element, such as pressing the button or mouse over the button, the change event comes into action. However, when we are focused on the input, the change event does not work. Let's see with the help of some examples.

Below are some examples that will make us understand the usage of the change event:

Example 1:

Using change event on input element as text:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Using change event for Input elements</title>
</head>
<body align="center">
   <input type="text" class="txtclass">
	<input type="button" value="Click me">
	</br>
	<label id="show"> </label>
    <script>
      let source = document.querySelector('.txtclass');
       let target = document.querySelector('#show');
        source.addEventListener('change', function () {
            target.textContent = this.value;
       });
    </script>
</body>
</html>

The output of the above code is shown below:

When we click on the 'Click me' button, the focus is lost from the textbox which means that change event will come into action. Also, we can see that when we provide the input, the change event will not work. After clicking on the button, the text is displayed in the label.

Example 2:

Using onChange attribute:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Using change Event for Select element</title>
</head>
<body>
<h3>Type your name and click anywhere on the browser</h3>
    <input type="text" id="id_1" onChange="show()">
	<script>
      function show(){
		var x=document.getElementById('id_1');
		x.style.color='red';
		}
		
    </script>
</body>
</html>

Output:

In the above code, when we type some text in the textbox, the onChange event focus is out but as soon we click somewhere on the screen the onChange attribute comes into action.

Using change event on radio box buttons

In case of the radio box buttons, the change event comes into role after we select any of the radio button. We will see in the below code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Using change Event for Radio Buttons</title>
</head>
<body>
	<h3>Choose the one you like</h3>
    <input type="radio" id="happy" name="status">Be Happy with what you have</br>
    <input type="radio" id="excited" name="status">Be Excited about what you want</br>
    <input type="radio" id="sad" name="status">Don't be Sad </br>
	<input type="radio" id="angry" name="status">Anger is your biggest enemy</br>
	<input type="radio" id="none" name="status">That's great</br>
<p id="show"></p>
    <script>
        let show = document.querySelector('#show');
        document.body.addEventListener('change', function (e) {
            let target = e.target;
            let display_msg;
            switch (target.id) {
           case 'happy':
                    display_msg = 'You are happy';
                    break;
            case 'excited':
                    display_msg = 'You are excited';
                    break;
             case 'sad':
                   display_msg = 'You are sad';
                   break;
	case 'angry':
                   display_msg = 'You are angry';
                   break;
	case 'none':
                   display_msg = 'none';
                   break;
            }
            show.textContent = display_msg;
        });
    </script>
</body>
</html>

The output of the above is shown below:

When we click on any of the radio buttons, the specified message is displayed which means that on clicking on the radio button, the focus is lost from it.

Using change event on select element

In the case of select element, the change event works when the selection of a particular value is completed. Below we have discussed an example through which we can understand the working of select element over a value.

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Using change Event for Select element</title>
</head>
<body>
    <select id="item">
        <option value="">Select an item</option>
        <option value="item1">Item1</option>
        <option value="item2">Item2</option>
        <option value="item3">Item3</option>
    </select>
    <label id="show"></label>
    <script>
        let source = document.querySelector('#item');
        let target = document.querySelector('#show');
        source.addEventListener('change', function () {
            target.textContent = this.value;
        });
    </script>
</body>
</html>

Output:

In the above output, we can see that when we select the value from the list, the name gets displayed beside it. It is because when we select a value, i.e., when the selection is completed, the change event comes into role. But, while we are making the selection, the change event does not work.

Next TopicJavaScript focusout event

← prev next →