สร้าง Elements ด้วย Vanilla JavaScript

นับจำนวน clicks บน element เป็นหนึ่งในสิ่งง่ายที่สุดที่ทำได้ด้วย JavaScript คุณต้องแค่宣告 variable เก็บ clicks แล้วใช้ addEventListener method บน target element

สมมติคุณต้องการ track จำนวน clicks บน button element เช่น home button

The HTML markup

สร้าง HTML button element ให้ class ชื่อ button-home:

<button class="button-home">Home</button>

The JavaScript

เพิ่มโค้ดต่อไปนี้ใน JavaScript file (จะอธิบายโค้ดด้านล่าง):

let buttonHome = document.querySelector(".button-home")
let CountButtonHomeClicks = 0
buttonHome.addEventListener("click", function() {
    CountButtonHomeClicks += 1
    console.log(CountButtonHomeClicks)
})

Result:

ผมเพิ่ม CSS styling นิดหน่อยให้ button element เพื่อให้กดง่ายขึ้น

สิ่งที่เกิดขึ้นใน JavaScript code:

• ก่อนอื่น เราใช้ querySelector() method เลือก class button-home บน button element แล้ว assign ให้ตัวแปร buttonHome
• จากนั้น เรา宣告ตัวแปร CountButtonHomeClicks เก็บ clicks ในอนาคต ให้ค่าเริ่มต้น 0
• ต่อมา เรา attach event listener ให้ buttonHome ด้วย addEventListener() method
• ภายใน event listener เราระบุว่าเรากำลัง listen สำหรับ 'click' events และต้องการ execute function() ทุกครั้งที่ click event เกิดขึ้น
• ภายใน function เราระบุว่าต้องการเพิ่ม 1 ให้ CountButtonHomeClicks ทุกครั้งที่ click event triggered ใช้ += (plus equals) operator
• สุดท้าย เรา log แต่ละ click event ด้วย console.log() บนตัวแปร CountButtonHomeClicks

ตอนนี้คุณรู้วิธีนับ clicks บน element เฉพาะแล้ว

Good to know:

• โค้ดข้างต้นใช้ ES6 syntax หากคุณใช้ ES5 แค่แทน let ด้วย var จะทำงานเหมือนกัน
• Function type ที่ใช้ในตัวอย่างนี้เรียกว่า anonymous function เพราะไม่มีชื่อ — ไม่เหมือน function expressions และ function declarations
• Anonymous functions ไม่สามารถ reuse ได้ หากต้องการเรียก function เดียวกันหลาย events ใช้ function expression หรือ function declaration

นี่คือ CodePen พร้อมโค้ดทั้งหมดข้างต้น