การรู้ว่ากำลังคลิกองค์ประกอบไหนในรายการที่สร้างจากอาร์เรย์ใน JavaScript

คำอธิบาย

ใช้ addEventListener() และ dataset เพื่อระบุว่าปุ่มไหนถูกคลิก

ตัวอย่างโค้ด

<script>
for (let i = 0; i < 3; i++) {
  let addButton = document.createElement('button');
  if (i == 0) {
    addButton.innerHTML = "Javascript";
    addButton.dataset.subject = "Javascript";
  }
  if (i == 1) {
    addButton.innerHTML = "MySQL";
    addButton.dataset.subject = "MySQL";
  }
  if (i == 2) {
    addButton.innerHTML = "Java";
    addButton.dataset.subject = "Java";
  }
  document.body.appendChild(addButton);
  addButton.addEventListener('click', function (evnt) {
    console.clear();
    console.log('Subject ' + evnt.target.dataset.subject + ' pressed');
  });
}
</script>

ผลลัพธ์

คลิกปุ่มแต่ละอัน → แสดงใน console ว่าปุ่มวิชาไหนถูกกด