Javascript Change
The javascript change event occurs when the element has completely changed.
To attach an event handler to the change javascript event of an element. you can either call the addEventListener() method:
element.addEventListener('change', function(){
// handle change
attribute of the element:
<input type="text" onchange="changeHandler()">
Using JavaScript change event for input elements:
The javascript change event of an <input> element fires when the <input> element loses focus. The change event does not fire when you are tying.
EXAMPLE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript change Event for Input Element</title>
</head>
<body>
<input type="text" class="input">
<button>Submit</button>
<p id="result"></p>
<script>
let input = document.querySelector('.input');
let result = document.querySelector('#result');
input.addEventListener('change', function () {
result.textContent = this.value;
});
</script>
</body>
</html>
OUTPUT:
Using JavaScript change event for radio buttons:
EXAMPLE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript change Event for Radio Buttons</title>
</head>
<body>
<label for="status">Status:</label>
<input type="radio" id="pending" name="status"> Pending
<input type="radio" id="resolved" name="status"> Resolved
<input type="radio" id="rejected" name="status"> Rejected
<p id="result"></p>
<script>
let result = document.querySelector('#result');
document.body.addEventListener('change', function (e) {
let target = e.target;
let message;
switch (target.id) {
case 'pending':
message = 'The Pending radio button changed';
break;
case 'resolved':
message = 'The Resolved radio button changed';
break;
case 'rejected':
message = 'The Rejected radio button changed';
break;
}
result.textContent = message;
});
</script>
</body>
</html>
OUTPUT:
How it works:
⦁ First, register an event handler to the change event of the body section. When an input radio button is clicked, its change event is bubbled to the body. This technique is called event delegation.
⦁ Then, show a corresponding message(information) based on which input radio button is selected.