วิธีเรียกหลายฟังก์ชัน JavaScript ใน Event onclick เดียว

เรียกหลายฟังก์ชันใน onclick ได้โดยคั่นด้วย Semicolon (;)

ไวยากรณ์

onclick="function1(); function2(); function3()"

ตัวอย่างจากบทความ

<html>
  <head>
    <script>
      function Display1() {
        document.write("Hello there!");
      }
      function Display2() {
        document.write("Hello World!");
      }
    </script>
  </head>
  <body>
    <p>คลิกปุ่มเพื่อเรียกฟังก์ชัน</p>
    <form>
      <input type="button" onclick="Display1(); Display2()" value="Result">
    </form>
  </body>
</html>

แนวทางปฏิบัติที่ดีกว่า (Best Practice)

1. ใช้ addEventListener (แนะนำ)

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

<script>
  function handleClick() {
    Display1();
    Display2();
  }
  
  document.getElementById('myBtn').addEventListener('click', handleClick);
</script>

2. ใช้ Arrow Function Inline

button.addEventListener('click', () => {
  Display1();
  Display2();
  analytics.track('button_click');
});

3. แยก Logic ออกจาก HTML

// HTML
<button id="submitBtn">Submit</button>

// JS
document.getElementById('submitBtn').addEventListener('click', function() {
  validateForm();
  submitData();
  showSuccessMessage();
});

เหตุผลที่ควรหลีกเลี่ยง Inline onclick

• Content Security Policy (CSP) - บล็อก inline scripts
• Separation of Concerns - HTML ควรไม่มี logic
• Maintainability - ยากต่อการ debug และ maintain
• Event Object - ไม่ได้รับ event object อัตโนมัติ
• Multiple Handlers - addEventListener เพิ่มได้หลายตัว onclick แทนที่ได้แค่ตัวเดียว

กรณีที่ยังใช้ onclick ได้

• Prototype/Testing ระหว่างพัฒนา
• Simple static pages
• Framework ที่จัดการให้ (React onClick, Vue @click, Angular (click))

สรุป