แอตทริบิวต์เหตุการณ์ onchange ใน HTML

แอตทริบิวต์ onchange ใน HTML ถูกกระตุ้นเมื่อคุณเปลี่ยนค่าขององค์ประกอบ HTML ในเอกสาร HTML

ไวยากรณ์

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

ตัวอย่าง

<!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>ตัวอย่างแอตทริบิวต์เหตุการณ์ onchange ของ HTML</h1>
<p>เลือกวิชาที่คุณชอบ:</p>
<select onchange="get()">
  <option>ฟิสิกส์</option>
  <option>เคมี</option>
  <option>คณิตศาสตร์</option>
</select>
<div class="show"></div>
<script>
  function get() {
    var msg = document.querySelector('.show');
    msg.innerHTML = "ค่าปัจจุบันคือ " + document.querySelector("select").value;
  }
</script>
</body>
</html>

ผลลัพธ์

เปลี่ยนค่าของรายการแบบเลื่อนเลือกเพื่อดูการทำงานของ onchange

จะแสดง "ค่าปัจจุบันคือ [วิชาที่เลือก]"