HTML DOM onchange Event

The HTML DOM onchange event occurs when the value of an element has been changed. It also works with radio buttons and checkboxes when the checked state has been changed. Note: This event is similar to the oninput event but the only difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus. 

Syntax:

• In HTML:

<element onchange="myScript">

• In JavaScript:

object.onchange = function(){myScript};

• In JavaScript, using the addEventListener() method:

object.addEventListener("change", myScript);

Example: In this example, we will learn about the HTML DOM onchange event using HTML.

html

<center>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h2>HTML DOM onchange Event</h2>

    <select id="LangSelect" onchange="GFGfun()">
        <option value="c">C</option>
        <option value="java">JAVA</option>
        <option value="html">HTML</option>
        <option value="python">PYTHON</option>
    </select>

    <p id="demo"></p>

    <script>
        function GFGfun() {
            var x = document.getElementById("LangSelect").value;
            document.getElementById(
                "demo").innerHTML = "You selected: " + x;
        }
    </script>
</center>

Output:

Example: In this example, we will learn about the HTML DOM onchange event using Javascript. 

html

<center>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h2>HTML DOM onchange Event</h2> Email:
    <input type="email" id="email">

    <script>
        document.getElementById(
        "email").onchange = function() {
            GFGfun()
        };

        function GFGfun() {
            var x = document.getElementById("email");
            x.value = x.value.toLowerCase();
        }
    </script>
</center>

Output:

Example: In this example, we will learn about the HTML DOM onchange event using the addEventListener() method in Javascript.

html

<center>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h2>HTML DOM onchange Event</h2> Email:
    <input type="email" id="email">

    <script>
        document.getElementById(
            "email").addEventListener(
        "change", GFGfun);

        function GFGfun() {
            var x = document.getElementById("email");
            x.value = x.value.toLowerCase();
        }
    </script>
</center>

Output: 

We have a complete list of HTML DOM methods, to check those please go through this HTML DOM Object Complete reference article.

Supported Browsers: The browsers supported by DOM onchange Event are listed below:

• Google Chrome
• Internet Explorer
• Firefox
• Apple Safari
• Opera

We have a Cheat Sheet on Javascript where we covered all the important topics of Javascript to check those please go through Javascript Cheat Sheet-A Basic guide to JavaScript.