HTMLElement: change event - Web APIs | MDN
Syntax
Use the event name in methods like addEventListener(), or set an event handler property.
js
addEventListener("change", (event) => { })
onchange = (event) => { }
Event type
A generic Event.
Examples
<select> element
HTML
html
<label>
Choose an ice cream flavor:
<select class="ice-cream" name="ice-cream">
<option value="">Select One …</option>
<option value="chocolate">Chocolate</option>
<option value="sardine">Sardine</option>
<option value="vanilla">Vanilla</option>
</select>
</label>
<div class="result"></div>
body {
display: grid;
grid-template-areas: "select result";
}
select {
grid-area: select;
}
.result {
grid-area: result;
}
JavaScript
js
const selectElement = document.querySelector(".ice-cream");
const result = document.querySelector(".result");
selectElement.addEventListener("change", (event) => {
result.textContent = `You like ${event.target.value}`;
});
Result
Text input element
For some elements, including <input type="text">, the change event doesn't fire until the control loses focus. Try entering something into the field below, and then click somewhere else to trigger the event.
HTML
html
<input placeholder="Enter some text" name="name" />
<p id="log"></p>
JavaScript
js
const input = document.querySelector("input");
const log = document.getElementById("log");
input.addEventListener("change", updateValue);
function updateValue(e) {
log.textContent = e.target.value;
}
Result
Specifications
| Specification |
|---|
| HTML # event-change |
| HTML # handler-onchange |
Browser compatibility
Different browsers do not always agree whether a change event should be fired for certain types of interaction. For example, keyboard navigation in <select> elements used to never fire a change event in Gecko until the user hit Enter or switched the focus away from the <select> (see Firefox bug 126379). Since Firefox 63 (Quantum), this behavior is consistent between all major browsers, however.