Free tools Windows power users keep installed
One-click scans. No signup required.
If a JavaScript change handler seems not to run, first check when the control commits its value. A text field usually fires change after editing ends—often when it loses focus—not on every keystroke. Use input for immediate feedback while a user types. Script assignments such as element.value = "…" do not automatically notify listeners.
Check whether the event is waiting for a committed value
The change event is for a value change that has been committed by the user; it is not a general notification for every edit. The timing depends on the control:
- Text input or textarea: typing usually does not fire
changeon each keystroke. It commonly fires when the user finishes editing, often by moving focus away from the field. - Checkbox: toggling the checkbox fires
change. - Select: the event fires when the user commits a selection.
MDN describes change as firing for <input>, <select>, and <textarea> when the user modifies the value: MDN: HTMLElement: change event.
Use input for feedback as the user types
If the callback needs to run during each user edit in a text control, listen for input instead:
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitches#1 Best Overall
const control = document.querySelector("#my-control");
control.addEventListener("input", (event) => {
console.log(event.target.value);
});The input event responds to user-driven value edits as they happen. It is distinct from change, which generally waits until the edit is committed. See MDN: Element: input event.
Check whether JavaScript, rather than the user, changed the value
Setting a control’s .value in code—or changing a select’s selectedIndex—is a programmatic update. Do not expect that assignment to trigger the same user event handler automatically. If your application changes the value, update the related application state directly. If other listeners must be notified, intentionally dispatch an event as part of that update.
Rank #2
Verify the event name, callback, and target
Use change as the event name with addEventListener; do not include the on prefix. Attach the listener to the form control whose value changes:
const control = document.querySelector("#my-control");
control.addEventListener("change", (event) => {
console.log(event.target.value);
});You can also assign a function to the element’s onchange property. For a dropdown, listen on the select element rather than an individual option.
Check that setup runs against the intended element
- Confirm the selector finds the control you expect; a missing or different element means the listener is not attached where you think it is.
- Make sure the control exists when the listener is registered.
- Confirm that the user action matches the event you chose: use
inputfor text edits in progress andchangefor committed values.
Without the page’s code, the exact cause cannot be determined; these checks distinguish the common timing, programmatic-update, target, and setup problems.
Quick Recap
Rank #4
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
