Call Javascript Function From Js File In Html Onclick

MUAZHAN

3 min read

·

Jun 18, 2024

53

Share

Cara Memanggil Fungsi JavaScript dari File JS dalam HTML dengan Onclick

Artikel ini akan membahas cara memanggil fungsi JavaScript yang ditulis di file JS terpisah dalam HTML menggunakan atribut onclick.

1. Struktur Dasar

Pertama, kita perlu memiliki tiga elemen:

• File HTML: Berisi struktur dan elemen HTML, serta kode untuk memanggil fungsi.
• File JavaScript: Berisi definisi fungsi JavaScript.
• Tag Script: Menghubungkan file JavaScript ke HTML.

2. File HTML

    
     


    Klik Saya!

Penjelasan:

• script src="script.js": Tag script ini menghubungkan file JavaScript script.js ke HTML.
• <button onclick="myFunction()">Klik Saya!</button>: Tombol ini akan memanggil fungsi myFunction() saat diklik.

3. File JavaScript (script.js)

function myFunction() {
  alert("Fungsi JavaScript dipanggil!");
}

Penjelasan:

• function myFunction() { ... }: Mendefinisikan fungsi bernama myFunction().
• alert("Fungsi JavaScript dipanggil!");: Kode di dalam fungsi, dalam contoh ini, menampilkan pesan "Fungsi JavaScript dipanggil!" dalam kotak dialog.

Cara Kerja

1. Memanggil Fungsi: Ketika pengguna mengklik tombol, atribut onclick pada tombol akan menjalankan kode myFunction().
2. Eksekusi Fungsi: Kode JavaScript dalam script.js dieksekusi. Fungsi myFunction() dipanggil.
3. Output: Kode dalam fungsi myFunction() dieksekusi, menampilkan pesan "Fungsi JavaScript dipanggil!".

Contoh Lain

Anda dapat mengganti kode dalam fungsi myFunction() dengan kode JavaScript lainnya. Berikut beberapa contoh:

• Menampilkan teks di elemen HTML:

function myFunction() {
  document.getElementById("demo").innerHTML = "Teks baru!";
}

• Mengubah gaya CSS:

function myFunction() {
  document.getElementById("myDiv").style.backgroundColor = "red";
}

Catatan:

• Pastikan file JavaScript dihubungkan ke file HTML dengan tag script.
• Pastikan nama fungsi di onclick sesuai dengan nama fungsi dalam file JavaScript.

Dengan memahami konsep ini, Anda dapat memanggil fungsi JavaScript dari file terpisah di HTML untuk membuat situs web yang lebih dinamis dan interaktif.