- Bagaimana Cara Mengaktifkan Tombol di JavaScript?
- Contoh 1: Memodifikasi Pesan Teks dengan Mengaktifkan Tombol
- Contoh 2: Mengaktifkan/Menonaktifkan Tombol di JavaScript
Bagaimana Cara Mengaktifkan Tombol di JavaScript?
Pernyataan bersyarat adalah persyaratan dasar untuk mengaktifkan tombol dalam JavaScript. Untuk mencapai ini, Anda perlu mendapatkan elemen dan kemudian beberapa fungsi kustom diterapkan untuk menerapkan beberapa operasi spesifik pada elemen itu. Fungsi ini dikaitkan dengan acara onclick tombol. Sehingga, setiap kali tombol diklik, fungsi tersebut akan dijalankan. Mari berlatih beberapa contoh untuk mengaktifkan tombol di JavaScript.
Contoh 1: Memodifikasi Pesan Teks dengan Mengaktifkan Tombol
Contoh dianggap memodifikasi pesan dengan mengaktifkan tombol di JavaScript. Contoh terdiri dari kode HTML dan JavaScript, yang dijelaskan di bawah ini:
kode HTML
< html >
< h2 > Contoh untuk mengaktifkan tombol < / h2 >
< div Indo = 'js' > Tekan Tombol untuk melihat keajaiban < / div >
< tombol klik = 'btntog()' > Tombol < / tombol >
< / html >
< naskah src = 'tes.js' >< / naskah >
Dalam kode HTML, deskripsinya adalah sebagai berikut:
- SEBUAH tag dibuat dengan “ id=js ”.
- Setelah itu, sebuah tombol dibuat terkait dengan a “btntog ()” metode. Dengan menekan 'Tombol' , metode ' btntog() ” dipicu.
- Pada akhirnya, file JavaScript “tes.js” dilewatkan sebagai src di dalam
tag. Kode untuk file JavaScript “ tes.js ” disediakan di sini:
kode JavaScript
fungsibtntog ( )
{
di mana = dokumen. getElementById ( 'js' ) ;
jika ( t. dalamHTML == 'Selamat datang di Linuxhint' ) {
t. dalamHTML = 'Dunia JavaScript' ; }
kalau tidak {
t. dalamHTML = 'Selamat datang di Linuxhint' ; }
}Dalam kode ini:
- getElementById digunakan untuk mengekstrak elemen HTML “ js ” dan nilainya disimpan dalam variabel “ t ”.
- Setelah itu, dalamHTML properti digunakan dalam kondisi if untuk memeriksa teks “ Selamat datang di Linuxhint ”.
- Jika kondisi benar, isi “ Selamat datang di Linuxhint ” diganti dengan “Dunia JavaScript “.
- Jika kondisinya salah, teksnya “Selamat datang di Linuxhint” ditugaskan sebagai konten HTML ke tag div.
Keluaran
Outputnya menunjukkan bahwa mengaktifkan tombol mengembalikan dua pesan sebagai “Selamat datang di Linuxhint” dan “Dunia JavaScript” kalau tidak.
Contoh 2: Mengaktifkan/Menonaktifkan Tombol di JavaScript
Contoh diikuti untuk mengubah teks sebaris tombol. Dalam contoh ini, ' HIDUP/MATI ” teks akan mengubah nilainya secara alternatif dengan menekan tombol. Kode HTML dan JavaScript disediakan di sini:
kode HTML
< html >
< h2 > Contoh untuk mengaktifkan tombol h2 >
< tipe masukan = 'tombol' Indo = 'myBtn' nilai = 'MATI'
klik = 'tgl();' >
< skrip src = 'tes.js' > naskah >
html >Kode di atas dijelaskan sebagai:
- Tombol yang dapat diklik yang memiliki id “Btn saya” dibuat dan nilainya disetel ke 'MATI' .
- Dengan menekan tombol, tgl() metode akan dipicu.
- Pada akhirnya, “tes.js” dilampirkan ke jalur sumber di dalam
menandai.
kode JavaScript
fungsitgl ( )
{
di mana = dokumen. getElementById ( 'myBtn' ) ;
jika ( t. nilai == 'PADA' ) {
t. nilai = 'MATI' ; }
selain itu ( t. nilai == 'MATI' ) {
t. nilai = 'PADA' ; }
}Dalam kode ini:
- SEBUAH tgl() metode ini digunakan untuk mengaktifkan tombol dalam JavaScript.
- Dalam metode ini, Anda mengekstrak elemen HTML dengan menggunakan getElementById properti, dan kemudian pernyataan if else-if ditambahkan padanya.
- jika “nilai== AKTIF” , alihkan nilainya ke 'MATI'. Jika nilainya adalah MATI, maka nilainya akan dialihkan ke “ PADA' .
Keluaran
Outputnya menunjukkan bahwa tombol telah dialihkan dari MATI ke PADA .
Itu semuanya! Anda telah belajar untuk mengaktifkan tombol dalam JavaScript.
Kesimpulan
Dalam JavaScript, tombol dapat digunakan untuk beralih di antara berbagai status nilainya sendiri, atau fungsi apa pun dapat dikaitkan dengan operasi sakelar. Itu klik() acara tombol dikaitkan dengan fungsi. Artikel ini menjelaskan ikhtisar tentang beralih tombol bersama dengan dua contoh praktis. Contoh pertama mengekstrak teks dengan dalamHTML properti dan memodifikasinya melalui tombol sakelar. Pada contoh kedua, nilai tombol itu sendiri diubah menggunakan fungsi khusus.