Ev Onchange

## HTML onchange Event Attribute The `onchange` event occurs when the value of an element is changed. For ``, ``, and `

`, the `onchange` event occurs when the user commits the change (e.g., by clicking outside the element, pressing Enter, or selecting an option from a dropdown).

**Note:** The `onchange` event is similar to the `oninput` event. The difference is that the `oninput` event occurs immediately after the value of an element has changed, while the `onchange` event occurs when the element loses focus, after the content has been changed.

**Tip:** For ``, the `onchange` event is triggered when one or more files are selected.

**Tip:** For `` and ``, the `onchange` event is triggered when the checked state has been changed.

**Tip:** For ``, the `onchange` event is triggered when a new color is selected.

**Tip:** For ``, ``, ``, ``, and ``, the `onchange` event is triggered when a new date/time is selected.

**Tip:** For ``, the `onchange` event is triggered when the value of the slider changes.

**Tip:** For ``, ``, and ``, the `onchange` event is triggered when the user presses Enter or the element loses focus.

**Tip:** For `<textarea>`, the `onchange` event is triggered when the user presses Enter or the element loses focus.

**Tip:** For ``, the `onchange` event is triggered when the user selects a new option.

**Tip:** The `onchange` event is not triggered when the value of an element is changed programmatically.

**Note:** The `onchange` event is supported by all HTML elements.

---

### Example

function myFunction() {
  var x = document.getElementById("myInput");
  x.value = x.value.toUpperCase();
}

Enter your name:

When you leave the input field, a function is triggered which transforms the input text to upper case.

---

### Browser Support

The numbers in the table specify the first browser version that fully supports the event.

| Event | Chrome | Edge | Firefox | Safari | Opera |
| :--- | :--- | :--- | :--- | :--- | :--- |
| onchange | Yes | Yes | Yes | Yes | Yes |

---

### Syntax

In HTML:

In JavaScript:

```javascript
object.onchange = function(){myScript};

In JavaScript, using the `addEventListener()` method:

```javascript
object.addEventListener("change", myScript);

---

### Technical Details

---

### More Examples

#### Example 1

A `` element with an `onchange` event:

function myFunction() {
  var x = document.getElementById("mySelect");
  document.getElementById("demo").innerHTML = "You selected: " + x.value;
}

Select a new car from the list.

Audi
  BMW
  Mercedes
  Volvo

#### Example 2