HTML onchange Event Attribute

HTMLWeb DevelopmentFront End Technology

The HTML onchange attribute is triggered when you change the value of an HTML element in an HTML document.


Following is the syntax −

<tagname onchange=”script”></tagname>


Let us see an example of HTML onchange event Attribute −

Live Demo

<!DOCTYPE html>
   body {
      color: #000;
      height: 100vh;
      background-color: #FBAB7E;
      background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
      text-align: center;
      padding: 20px;
   .show {
      font-size: 1.1rem;
      margin: 1rem auto;
   select {
      height: 2rem;
      width: 30%;
      font-size: 1rem;
      background: transparent;
      border: 2px solid #fff;
      outline: none;
<h1>HTML onchange Event Attribute Demo</h1>
<p>Select your favourite subject:</p>
<select onchange="get()">
<div class="show"></div>
   function get() {
      var msg = document.querySelector('.show');
      msg.innerHTML = "Current Value is " + document.querySelector("select").value;


Now change the value of drop-drown list to observe how onchange event triggered.

Updated on 16-Feb-2021 04:39:29