Add Onclick Event Javascript Button

MUAZHAN

4 min read

·

Jun 22, 2024

35

Share

Menambahkan Event Click pada Tombol dengan JavaScript

Dalam pengembangan web, menambahkan event click pada tombol dengan JavaScript adalah teknik dasar untuk membuat halaman web menjadi lebih interaktif. Event click memungkinkan kita untuk menjalankan kode JavaScript ketika tombol diklik oleh pengguna. Berikut adalah panduan lengkap tentang cara menambahkan event click pada tombol dengan JavaScript:

1. Menggunakan Atribut onclick pada Tag HTML

Metode paling sederhana untuk menambahkan event click adalah dengan menggunakan atribut onclick langsung di tag <button>:

Klik Saya

Dalam contoh di atas, myFunction() adalah nama fungsi JavaScript yang akan dijalankan ketika tombol diklik. Fungsi ini harus didefinisikan di dalam kode JavaScript Anda:

function myFunction() {
  // Kode yang akan dieksekusi ketika tombol diklik
  alert("Tombol diklik!");
}

2. Menggunakan Metode addEventListener()

Metode addEventListener() adalah cara yang lebih fleksibel dan mudah digunakan untuk menambahkan event click. Metode ini memungkinkan Anda untuk menambahkan event listener ke elemen HTML apa pun, termasuk tombol. Berikut adalah contohnya:

Klik Saya

const myButton = document.getElementById("myButton");

myButton.addEventListener("click", function() {
  // Kode yang akan dieksekusi ketika tombol diklik
  console.log("Tombol diklik!");
});

Kode ini akan mencari elemen dengan id myButton, kemudian menambahkan event listener untuk event click. Ketika tombol diklik, fungsi anonim yang didefinisikan di dalam addEventListener() akan dijalankan.

3. Menggunakan onClick dalam React

Jika Anda menggunakan React, Anda dapat menambahkan event click ke tombol dengan menggunakan atribut onClick dalam komponen JSX Anda:

function MyComponent() {
  const handleClick = () => {
    // Kode yang akan dieksekusi ketika tombol diklik
    console.log("Tombol diklik!");
  };

  return (
    Klik Saya
  );
}

Kode ini mendefinisikan sebuah fungsi handleClick yang akan dijalankan ketika tombol diklik. Fungsi ini kemudian ditugaskan ke atribut onClick dari komponen tombol.

Keuntungan Menggunakan addEventListener()

• Lebih Fleksibel: Anda dapat menambahkan banyak event listener ke elemen yang sama, dan Anda dapat menghapusnya kapan saja.
• Lebih Terstruktur: Ini membantu memisahkan kode HTML dari kode JavaScript, membuat kode Anda lebih mudah dibaca dan dirawat.
• Lebih Bersih: Metode ini lebih bersih dan profesional dibandingkan dengan menggunakan atribut onclick.

Kesimpulan

Menambahkan event click pada tombol dengan JavaScript adalah cara yang efektif untuk membuat halaman web Anda lebih interaktif. Dengan menggunakan salah satu metode yang dijelaskan di atas, Anda dapat dengan mudah menjalankan kode JavaScript ketika tombol diklik oleh pengguna.