วิธีสร้างองค์ประกอบด้วย JavaScript วานิลลา

การนับจำนวนคลิกบนองค์ประกอบเป็นหนึ่งในวิธีที่ง่ายที่สุดที่คุณสามารถทำได้ด้วย JavaScript สิ่งที่คุณต้องทำคือประกาศตัวแปรเพื่อจัดเก็บการคลิกของคุณ จากนั้นใช้เมธอด addEventListener บนองค์ประกอบเป้าหมายของคุณ

สมมติว่าคุณต้องการติดตามจำนวนการคลิกบนองค์ประกอบปุ่ม เช่น ปุ่มโฮม

มาร์กอัป HTML

สร้างองค์ประกอบปุ่ม HTML และกำหนดคลาสของปุ่มโฮม:

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

จาวาสคริปต์

เพิ่มรหัสต่อไปนี้ในไฟล์ 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
• จากนั้นเราแนบฟังเหตุการณ์เข้ากับ buttonHome ของเราโดยใช้ addEventListener() วิธีการ
• ภายในตัวฟังเหตุการณ์ของเรา เราระบุว่าเรากำลังฟัง 'click' เหตุการณ์และเราต้องการเรียกใช้ function() ในทุกกิจกรรมการคลิก
• ภายในฟังก์ชันของเรา เราระบุว่าต้องการเพิ่ม 1 ใน CountButtonHomeClicks ตัวแปรทุกครั้งที่มีการทริกเกอร์เหตุการณ์การคลิก ในการเพิ่ม 1 เราใช้ += (บวกเท่ากับ) โอเปอเรเตอร์
• สุดท้าย เราบันทึกเหตุการณ์การคลิกแต่ละครั้งโดยใช้ console.log() ใน CountButtonHomeClicks . ของเรา ตัวแปร.

ตอนนี้คุณรู้วิธีนับคลิกบนองค์ประกอบเฉพาะแล้ว

ข้อควรรู้:

• โค้ดด้านบนใช้ไวยากรณ์ ES6 หากคุณกำลังใช้ ES5 เพียงแทนที่ let ด้วย var และจะได้ผลเช่นเดียวกัน
• ประเภทฟังก์ชันที่เราใช้ในตัวอย่างนี้เรียกว่า ฟังก์ชันที่ไม่ระบุชื่อ เพราะมันไม่มีชื่อ — ไม่เหมือนกับ นิพจน์ฟังก์ชัน และ การประกาศฟังก์ชัน
• ไม่สามารถใช้ฟังก์ชันที่ไม่ระบุชื่อซ้ำได้ หากคุณต้องการเรียกใช้ฟังก์ชันเดียวกันในหลายเหตุการณ์ ให้ใช้นิพจน์ฟังก์ชันหรือการประกาศฟังก์ชัน

นี่คือ CodePen ที่มีโค้ดด้านบนทั้งหมด