วิธีตรวจสอบว่าปุ่มถูกคลิกด้วย JavaScript

ตัวอย่างโค้ด

ตัวอย่างต่อไปนี้แสดงวิธีตรวจสอบว่าถูกคลิกหรือไม่และนับจำนวนครั้งที่คลิก:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <title>Document</title> 
  <style> 
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .result { font-size: 18px; font-weight: 500; color: blueviolet; }
  </style> 
</head> 
<body onbeforeunload="return pageUnload()"> 
  <h1>การตรวจสอบว่าถูกคลิกด้วย JavaScript</h1> 
  <div class="result"></div> 
  <br /> 
  <button class="Btn">CLICK HERE</button> 
  <h3>คลิกที่ปุ่มด้านบนเพื่อตรวจสอบว่าถูกคลิกหรือไม่</h3> 
  <script> 
    let BtnEle = document.querySelector(".Btn"); 
    let resEle = document.querySelector(".result"); 
    let clickCount = 0; 
    BtnEle.addEventListener("click", () => { 
      clickCount++; 
      resEle.innerHTML = "The button has been clicked " + clickCount + " times "; 
    }); 
  </script> 
</body> 
</html>

ผลลัพธ์

เมื่อคลิกปุ่ม 5 ครั้ง:

คำอธิบาย

โค้ดนี้ใช้ addEventListener เพื่อฟังเหตุการณ์ click บนปุ่ม ตัวแปร clickCount จะเพิ่มขึ้นทุกครั้งที่คลิก และแสดงผลจำนวนครั้งที่คลิกใน element ที่มี class result