by 
Atribut data-* memungkinkan menyimpan informasi khusus langsung di elemen HTML, misalnya ID produk atau harga pada tombol. Artikel ini membahas cara mengambil nilai data attribute di JavaScript.
Properti dataset
<button id="beli" data-id="42" data-harga="15000">Beli</button>
<script>
const btn = document.getElementById("beli");
console.log(btn.dataset.id); // "42"
console.log(btn.dataset.harga); // "15000"
</script>
Penamaan: data-harga di HTML diakses sebagai dataset.harga. Untuk data-user-id, gunakan dataset.userId (camelCase).
Contoh Kasus: Tombol Beli Dinamis
<script>
document.querySelectorAll(".beli").forEach(btn => {
btn.addEventListener("click", function() {
const id = this.dataset.id;
const harga = Number(this.dataset.harga);
console.log(`Membeli produk ${id} seharga ${harga}`);
});
});
</script>
Mengubah Nilai Data
<script> btn.dataset.status = "terpilih"; // menambah/mengubah data-status </script>
Kesimpulan
Gunakan properti dataset untuk membaca dan menulis atribut data-*. Ini cara rapi menyimpan informasi tambahan di elemen, sangat berguna untuk tombol aksi seperti beli atau hapus.
Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi JavaScript (MDN).
