Semasa membuat halaman, kadang-kadang perlu apabila anda mengklik butang yang diletakkan di halaman, beberapa peristiwa yang diprogramkan oleh penulis berlaku di penyemak imbas. Untuk melakukan ini, anda perlu meletakkan kod JavaScript dalam dokumen yang dihasilkan dan mengikatnya dengan butang yang diperlukan. Bergantung pada jumlah kod yang diperlukan untuk melaksanakan acara yang dimaksudkan, Anda dapat menggunakan berbagai cara untuk menghubungkan tombol ke kod tersebut.
Arahan
Langkah 1
Selalunya, panggilan kod JavaScript terikat pada acara onclick, iaitu dengan klik pada butang tetikus kiri. Sekiranya anda tidak memerlukan banyak kod untuk menerangkan tindakan yang perlu dilakukan, maka semuanya dapat diletakkan langsung di tag butang. Sebagai contoh, untuk memprogram penyemak imbas untuk menunjukkan mesej mudah apabila butang diklik, skrip JavaScript akan kelihatan seperti ini: amaran ('Kod berfungsi!') Hanya memerlukan satu pernyataan dan teks. Semua ini boleh diletakkan dengan mudah dalam deskripsi acara onclick dari tag butang. Dalam kes ini, kod HTML halaman yang paling mudah mungkin kelihatan seperti ini:
Butang dengan kod
Butang dengan kod
Langkah 2
Adalah tidak praktikal untuk meletakkan kod JavaScript yang lebih kompleks terus di tag butang. Lebih mudah untuk membuat fungsi yang terpisah dari itu, dan memasukkan panggilannya dalam acara onclick. Sebagai contoh, ini mungkin kelihatan seperti fungsi yang menunjukkan tetingkap yang mengandungi waktu klik butang: fungsi getTime () {
var now = tarikh baru ();
amaran ("Kod berfungsi dalam" + now.getHours () + ":" + now.getMinutes ());
} Ia harus diletakkan di tajuk halaman (antara tag dan). Kod lengkap halaman dengan panggilan ke fungsi ini terikat pada butang mungkin kelihatan seperti ini:
Butang panggilan fungsi
fungsi getTime () {
var now = tarikh baru ();
amaran ("Kod berfungsi dalam" + now.getHours () + ":" + now.getMinutes ());
}
Butang panggilan fungsi
Langkah 3
Kaedah yang sama harus digunakan ketika mengklik beberapa butang yang berbeda harus meningkatkan peristiwa yang dapat dijelaskan dengan kod JavaScript yang sama. Sebagai contoh, anda sedikit boleh mengubah fungsi sebelumnya untuk menambahkan pengenalan butang yang ditekan ke kotak mesej: fungsi getTime (btnString) {
var now = tarikh baru ();
amaran (btnString + "diklik di" + now.getHours () + ":" + now.getMinutes ());
} Kod lengkap untuk halaman dengan tiga butang seperti ini mungkin kelihatan seperti ini:
Tiga butang dengan panggilan fungsi
fungsi getTime (btnString) {
var now = tarikh baru ();
amaran (btnString + "diklik di" + now.getHours () + ":" + now.getMinutes ());
}
Butang pertama
Butang kedua
Butang ketiga
