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 −

<!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.

Published on 24-Sep-2019 15:40:11