HTML DOM onchange Event Last Updated : 26 Nov, 2024 Comments Improve Suggest changes Like Article Like Report 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. In HTML:<element onchange="myScript"> html <!DOCTYPE html> <html lang="en"> <body> <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() { let x = document.getElementById("LangSelect").value; document.getElementById( "demo").innerHTML = "You selected: " + x; } </script> </body> </html> In JavaScript:object.onchange = function(){myScript}; html <!DOCTYPE html> <html lang="en"> <body> <input type="email" id="email"> <script> document.getElementById( "email").onchange = function () { GFGfun() }; function GFGfun() { let x = document.getElementById("email"); x.value = x.value.toLowerCase(); } </script> </body> </html> In JavaScript, using the addEventListener() Method:object.addEventListener("change", myScript); html <!DOCTYPE html> <html lang="en"> <body> <input type="email" id="email"> <script> document.getElementById( "email").addEventListener( "change", GFGfun); function GFGfun() { let x = document.getElementById("email"); x.value = x.value.toLowerCase(); } </script> </body> </html> Comment More infoAdvertise with us Next Article HTML DOM onchange Event V Vijay Sirra Follow Improve Article Tags : Web Technologies HTML HTML-DOM Similar Reads HTML | DOM onratechange Event The DOM onratechange event occurs if the playing speed of the audio/video is changed. The playbackRate property is used to sets or returns the current playback speed of an audio/video. Supported Tags: <audio><video> Syntax: In HTML: <element onratechange="myScript">In JavaScript: o 1 min read HTML | DOM onmessage Event The onmessage Event in HTML DOM used when an object has received some message through an event source. The event object for onmessage Event supports the following schemes: data: It contains the actual message present inside it.origin: It contains the URL of the document that invoked the event.lastEv 2 min read HTML DOM ondragend Event The HTML DOM ondragend event occurs when a draggable element finishes dragging. There are some events that are used and occurred in the different stages of a drag-and-drop operation: ondragstart: occurs when dragging of an element started.ondrag: occurs while an element is dragging.ondragend: occurs 3 min read HTML DOM oncut Event The HTML DOM oncut Event occurs when the content of an element is cut by the user. The oncut event is mostly used on elements with type="text". Supported Tags It supports all HTML elements. Syntax: In HTML: <element oncut="myScript"> In JavaScript: object.oncut = function(){myScript}; In JavaS 2 min read HTML DOM onpaste Event The HTML DOM onpaste event occurs when some content is pasted in an element. this event works on every element like in <p> element if contenteditable set is true then we can paste content in <p> element. The HTML DOM onpaste event is mostly used in input element type="text". Supported Ta 1 min read HTML | DOM Storage Event The Storage Event in HTML DOM is used to make change in the storage area in the context of another document. When there is modification in the storage area of the window, a storage event is sent to that window. Syntax: window.addEventListener("storage", script) Example: html <!DOCTYPE html> 1 min read HTML | DOM ontoggle Event The ontoggle event in HTML DOM occurs when the <details> element user opens or closes by the user. The <details> tag is used for the content/information which is initially hidden but could be displayed if the user wishes to see it. Supported tags <details> Syntax: In HTML: <elem 1 min read HTML DOM ononline Event The DOM ononline event occurs on the online work of the browser. The ononline event is a conflict with the onoffline event. Note: navigator.onLine property is used to check the mode of the browser. Supported Tags <body> Syntax: In HTML: <element ononline="myScript">In JavaScript: object. 1 min read HTML DOM onsearch Event The onsearch event in HTML DOM occurs when a user searches using an <input> element with type="search". This event works when the user press "Enter" or clicks "x" in the search box. Supported tags: <input type="search"> Syntax: In HTML: <element onsearch="myScript">In JavaScript: o 1 min read HTML DOM onload Event The HTML DOM onload event in HTML occurs when an object has been loaded. The onload event is mostly used within the <body> tag, in order to run the script on the web page that will load all the content completely. The onload event can be used to check the user's browser type and browser versio 2 min read Like