revision:
The attribute fires the moment when the value of the element is changed.
The "onchange attribute" is part of the event attributes, and can be used on any HTML element.
This 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 "onchange" occurs when the element loses focus. The other difference is that the onchange event also works on <select> elements.
<element onchange="script"></element>
This attribute contains single value script which works when the onchange attribute is called.
Select a new car from the list.
When you select a new car, a function is triggered which outputs the value of the selected car.
<p class="select">Select a new car from the list.</p>
<select style="margin-left:3vw;" id="mySelect" onchange="myCar()">
<option value="Audi">Audi
<option value="BMW">BMW
<option value="Mercedes">Mercedes
<option value="Volvo">Volvo
</select>
<p class="spec">When you select a new car, a function is triggered which outputs the value
of the selected car.</p>
<p class="spec" id="demo"></p>
<script>
function myCar() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>
Modify the text in the input field, then click outside the field to fire the onchange event.
Enter some text:
<p class="spec">Modify the text in the input field, then click outside the field to fire
the onchange event.</p>
<p class="spec">Enter some text: <input type="text" name="txt" value="Hello"
onchange="newText(this.value)"></p>
<script>
function newText(val) {
alert("The input value has changed. The new value is: " + val);
}
</script>