Saat membuat halaman, terkadang perlu bahwa ketika Anda mengklik tombol yang ditempatkan di halaman, beberapa acara yang diprogram oleh penulis terjadi di browser. Untuk melakukan ini, Anda perlu menempatkan kode JavaScript di dokumen yang dihasilkan dan mengikatnya ke tombol yang diperlukan. Bergantung pada jumlah kode yang diperlukan untuk mengimplementasikan acara yang dimaksud, Anda dapat menggunakan berbagai cara untuk menghubungkan tombol ke kode.
instruksi
Langkah 1
Paling sering, panggilan kode JavaScript terikat ke acara onclick, yaitu klik pada tombol kiri mouse. Jika Anda tidak membutuhkan banyak kode untuk menggambarkan tindakan yang perlu terjadi, maka semuanya dapat ditempatkan langsung di tag tombol. Misalnya, untuk memprogram browser untuk menampilkan pesan sederhana ketika tombol diklik, skrip JavaScript akan terlihat seperti ini: alert ('Kode bekerja!') Hanya membutuhkan satu pernyataan dan teks. Semua ini dapat dengan mudah ditempatkan di deskripsi acara onclick dari tag tombol. Dalam hal ini, kode HTML halaman yang paling sederhana mungkin terlihat seperti ini:
Tombol dengan kode
Tombol dengan kode
Langkah 2
Tidak praktis untuk menempatkan kode JavaScript yang lebih kompleks secara langsung di tag tombol. Lebih mudah untuk membuat fungsi terpisah darinya, dan menempatkan panggilannya di acara onclick. Misalnya, ini mungkin terlihat seperti fungsi yang menampilkan jendela yang berisi waktu klik tombol: function getTime () {
var sekarang = tanggal baru ();
alert("Kode bekerja di" + now.getHours() + ":" + now.getMinutes());
} Itu harus ditempatkan di header halaman (antara dan tag). Kode lengkap halaman dengan panggilan ke fungsi ini yang terikat ke tombol mungkin terlihat seperti ini:
Tombol panggil fungsi
fungsi getTime() {
var sekarang = tanggal baru ();
alert("Kode bekerja di" + now.getHours() + ":" + now.getMinutes());
}
Tombol panggil fungsi
Langkah 3
Metode yang sama harus digunakan ketika mengklik beberapa tombol yang berbeda harus memunculkan suatu peristiwa yang dapat dijelaskan dengan kode JavaScript yang sama. Misalnya, Anda dapat sedikit memodifikasi fungsi sebelumnya untuk menambahkan identifikasi tombol yang ditekan ke kotak pesan: function getTime (btnString) {
var sekarang = tanggal baru ();
alert (btnString + "diklik" + sekarang.getHours () + ":" + sekarang.getMinutes ());
} Kode lengkap untuk halaman dengan tiga tombol tersebut mungkin terlihat seperti ini:
Tiga tombol dengan panggilan fungsi
fungsi getTime (btnString) {
var sekarang = tanggal baru ();
alert (btnString + "diklik" + sekarang.getHours () + ":" + sekarang.getMinutes ());
}
Tombol pertama
Tombol kedua
Tombol ketiga
