ใช้ HTML Button เรียก JavaScript Function

วิธีง่ายที่สุด: ใช้ Attribute onclick ใน <button> หรือ <input type="button">

วิธีที่ 1: Inline onclick (Simple)

<button onclick="myFunction()">Click Me</button>
<input type="button" value="Click Me" onclick="myFunction()" />

// รองรับ Double Click
<input type="button" value="Double Click" ondblclick="myFunction()" />

วิธีที่ 2: DOM Property (แยก HTML/JS)

<button id="myBtn">Click Me</button>

<script>
  document.getElementById("myBtn").onclick = myFunction;
  // หรือ
  document.getElementById("myBtn").onclick = function() { ... };
</script>

วิธีที่ 3: addEventListener (แนะนำมากที่สุด)

<button id="myBtn">Click Me</button>

<script>
  const btn = document.getElementById("myBtn");

  // หลาย Handlers ได้
  btn.addEventListener("click", handler1);
  btn.addEventListener("click", handler2);

  // ลบได้
  btn.removeEventListener("click", handler1);

  // Options
  btn.addEventListener("click", handler, { once: true }); // รันครั้งเดียว
  btn.addEventListener("click", handler, { passive: true }); // Scroll Performance
</script>

ส่ง Parameter ให้ Function

// Inline - ต้อง wrap ใน function
<button onclick="greet('John')">Greet</button>

// addEventListener - ใช้ Arrow Function/bind
btn.addEventListener("click", () => greet("John"));
btn.addEventListener("click", greet.bind(null, "John"));

Button Types

Best Practice: ใช้ <button> แทน <input type="button"> (Semantic, Style ง่าย, ใส่ HTML ใส่ได้) ใช้ addEventListener แทน Inline/Property