The change event in JavaScript is a specific type of event that triggers when the focus shifts from one element to another. This change event in JavaScript is derived from the Event object, meaning it possesses all the methods and properties associated with the Event.
In this segment, we will explore and apply the practical application of the change event across various JavaScript elements, including input text fields, checkboxes, radio buttons, select dropdowns, and more.
To implement the change event on a JavaScript element, it is necessary to attach an event handler. This can be accomplished by utilizing either the addEventListener method or the onChange attribute associated with the element. The syntax for both approaches is outlined below:
addEventListener method
element.addEventListener('change', function() {
//statement codes
})
onChange attribute
<input type="text/radio/file" onchange="changeHandler(event)">
We will explore the JavaScript change event utilizing two different approaches.
Using JavaScript change event on Input elements
Various input types correspond to distinct elements, including text boxes, radio buttons, and checkboxes. When you enter data and subsequently navigate to another element—like clicking a button or hovering the mouse over it—the change event is triggered. However, while the input field is in focus, the change event remains inactive. Let's explore this concept further through some illustrative examples.
Here are several instances that will help clarify the application 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:
Upon clicking the 'Click me' button, the focus shifts away from the textbox, triggering the change event. Furthermore, it is important to note that while we are entering text, the change event does not activate. After pressing the button, the entered text will be shown 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 code provided, when we input text into the textbox, the onChange event does not trigger immediately. However, as soon as we click anywhere else on the screen, the onChange attribute becomes active and executes.
Using change event on radio box buttons
For radio button controls, the change event is triggered when a user selects any of the available options. The following code illustrates this concept:
<!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:
Upon selecting any of the radio buttons, the designated message appears, indicating that the focus is removed from the selected radio button upon interaction.
Using change event on select element
For the select element, the change event is triggered once the selection of a specific value has been finalized. Below, we provide an example that illustrates how the select element operates when a value is selected.
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 output presented above, it is evident that when a value is chosen from the list, the corresponding name appears next to it. This occurs because once a value is selected—meaning the selection process is finalized—the change event is triggered. However, during the actual selection process, the change event does not activate.