Thuộc tính sự kiện onchange trong HTML

Thuộc tính sự kiện onchange trong HTML được kích hoạt khi bạn thay đổi giá trị của một phần tử HTML trong tài liệu HTML.

Cú pháp

Cú pháp như sau:

<tagname onchange="script"></tagname>

Ví dụ

Dưới đây là ví dụ minh họa thuộc tính sự kiện onchange trong HTML:

<!DOCTYPE html>
<html>
<head>
  <style>
    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;
    }
  </style>
</head>
<body>
<h1>Demo thuộc tính sự kiện onchange trong HTML</h1>
<p>Chọn môn học yêu thích của bạn:</p>
<select onchange="get()">
  <option>Vật lý</option>
  <option>Hóa học</option>
  <option>Toán học</option>
</select>
<div class="show"></div>
<script>
  function get() {
    var msg = document.querySelector('.show');
    msg.innerHTML = "Giá trị hiện tại là " + document.querySelector("select").value;
  }
</script>
</body>
</html>

Kết quả

Bây giờ thay đổi giá trị của danh sách thả xuống để quan sát cách sự kiện onchange được kích hoạt.