การนับจำนวนคลิกบนอิลีเมนต์เป็นหนึ่งในสิ่งที่ง่ายที่สุดที่ทำได้กับ JavaScript ทุกสิ่งที่คุณต้องทำคือ ประกาศตัวแปรเพื่อเก็บจำนวนคลิก และใช้เมธอด addEventListener บนอิลีเมนต์เป้าหมาย
สมมติว่าคุณต้องการติดตามจำนวนคลิกบนอิลีเมนต์ปุ่ม เช่น ปุ่มหน้าหลัก
มาร์กอัป HTML
สร้างอิลีเมนต์ปุ่ม HTML และให้คลาส button-home:
<button class="button-home">Home</button>JavaScript
เพิ่มโค้ดต่อไปนี้ในไฟล์ JavaScript ของคุณ (จะอธิบายด้านล่าง):
let buttonHome = document.querySelector(".button-home"); let CountButtonHomeClicks = 0; buttonHome.addEventListener("click", function() { CountButtonHomeClicks += 1; console.log(CountButtonHomeClicks); });ผลลัพธ์:
ผมเพิ่ม CSS สไตล์นิดหน่อยให้ปุ่มด้านบนเพื่อให้คลิกง่ายขึ้น
สิ่งที่เกิดขึ้นในโค้ด JavaScript:
- ก่อนอื่น ใช้เมธอด
querySelector()เลือกคลาสbutton-homeบนอิลีเมนต์ปุ่ม แล้วกำหนดให้ตัวแปรbuttonHome - จากนั้นประกาศตัวแปร
CountButtonHomeClicksเพื่อเก็บคลิกในอนาคต ให้ค่าเริ่มต้นเป็น 0 - ต่อมาแนบ event listener เข้ากับ buttonHome โดยใช้เมธอด
addEventListener() - ภายใน event listener ระบุว่าจะรอฟังเหตุการณ์
'click'และต้องการรันfunction()ทุกครั้งที่มีการคลิก - ภายในฟังก์ชัน ระบุว่าต้องการเพิ่ม 1 ให้ตัวแปร
CountButtonHomeClicksทุกครั้งที่มีการคลิก ใช้ตัวดำเนินการ+=(บวกเท่ากับ) - สุดท้าย ใช้
console.log()แสดงแต่ละเหตุการณ์คลิก บนตัวแปรCountButtonHomeClicks
ตอนนี้คุณรู้วิธีนับคลิกบนอิลีเมนต์เฉพาะแล้ว
ควรทราบ:
- โค้ดด้านบนใช้ไวยากรณ์ ES6 หากใช้ ES5 ให้เปลี่ยน
letเป็นvarจะทำงานเหมือนกัน - ประเภทฟังก์ชันในตัวอย่างนี้เรียกว่า anonymous function (ฟังก์ชันไร้ชื่อ) เพราะไม่มีชื่อ — ต่างจาก function expressions และ function declarations
- Anonymous functions ไม่สามารถนำกลับมาใช้ใหม่ได้ หากต้องการเรียกฟังก์ชันเดียวกันหลายเหตุการณ์ ให้ใช้ function expression หรือ function declaration
รับโค้ด
นี่คือ CodePen พร้อมโค้ดทั้งหมดด้านบน
