- Bagaimana untuk Togol Butang dalam JavaScript?
- Contoh 1: Mengubah Suai Mesej Teks dengan Menogol Butang
- Contoh 2: Menogol Butang HIDUP/MATI dalam JavaScript
Bagaimana untuk Togol Butang dalam JavaScript?
Pernyataan bersyarat ialah keperluan asas untuk menogol butang dalam JavaScript. Untuk mencapai ini, anda perlu mendapatkan elemen dan kemudian beberapa fungsi tersuai digunakan untuk menggunakan beberapa operasi khusus pada elemen tersebut. Fungsi ini dikaitkan dengan acara onclick butang. Jadi, apabila butang itu diklik, fungsi itu akan dilaksanakan. Mari kita amalkan beberapa contoh untuk menogol butang dalam JavaScript.
Contoh 1: Mengubah Suai Mesej Teks dengan Menogol Butang
Satu contoh dianggap mengubah suai mesej dengan menogol butang dalam JavaScript. Contoh tersebut terdiri daripada kod HTML dan JavaScript, yang diterangkan di bawah:
kod HTML
< html >
< h2 > Contoh untuk menogol butang < / h2 >
< div ID = 'js' > Tekan Butang untuk melihat sihir < / div >
< butang onclick = 'btntog()' > Butang < / butang >
< / html >
< skrip src = 'test.js' >< / skrip >
Dalam kod HTML, penerangan adalah seperti berikut:
- A tag dicipta dengan ' id=js ”.
- Selepas itu, butang dicipta dikaitkan dengan a “btntog()” kaedah. Dengan menekan “Butang” , cara ' btntog() ” dicetuskan.
- Pada akhirnya, fail JavaScript “test.js” diluluskan sebagai src dalam
tag. Kod untuk fail JavaScript “ test.js ” disediakan di sini:
kod JavaScript
functionbtntog ( )
{
di mana = dokumen. getElementById ( 'js' ) ;
jika ( t. innerHTML == 'Selamat datang ke Linuxhint' ) {
t. innerHTML = 'Dunia JavaScript' ; }
lain {
t. innerHTML = 'Selamat datang ke Linuxhint' ; }
}Dalam kod ini:
- getElementById digunakan untuk mengekstrak elemen HTML ' js ' dan nilai disimpan dalam pembolehubah ' t ”.
- Selepas itu, yang innerHTML harta digunakan dalam syarat if untuk menyemak teks “ Selamat datang ke Linuxhint ”.
- Jika syarat itu benar, kandungan ' Selamat datang ke Linuxhint ” digantikan dengan “Dunia JavaScript “.
- Jika syarat salah, teks “Selamat datang ke Linuxhint” diperuntukkan sebagai kandungan HTML kepada teg div.
Pengeluaran
Output menunjukkan bahawa menogol butang mengembalikan dua mesej sebagai “Selamat datang ke Linuxhint” dan “Dunia JavaScript” secara alternatif.
Contoh 2: Menogol Butang HIDUP/MATI dalam JavaScript
Satu contoh diikuti untuk menukar teks sebaris butang. Dalam contoh ini, ' HIDUP/MATI ” teks secara alternatif akan menukar nilai dengan menekan butang. Kod HTML dan JavaScript disediakan di sini:
kod HTML
< html >
< h2 > Contoh untuk menogol butang h2 >
< jenis input = 'butang' ID = 'myBtn' nilai = 'MATI'
onclick = 'Tarikh();' >
< skrip src = 'test.js' > skrip >
html >Kod di atas diterangkan sebagai:
- Butang boleh klik yang mempunyai id “myBtn” dicipta dan nilainya ditetapkan kepada “MATI” .
- Dengan menekan butang, Tarikh() kaedah akan dicetuskan.
- Pada akhirnya, “test.js” dilampirkan pada laluan sumber dalam
tag.
kod JavaScript
functiontgl ( )
{
di mana = dokumen. getElementById ( 'myBtn' ) ;
jika ( t. nilai == 'HIDUP' ) {
t. nilai = 'MATI' ; }
elseif ( t. nilai == 'MATI' ) {
t. nilai = 'HIDUP' ; }
}Dalam kod ini:
- A Tarikh() kaedah digunakan untuk menogol butang dalam JavaScript.
- Dalam kaedah ini, anda mengekstrak elemen HTML dengan menggunakan getElementById harta, dan kemudian pernyataan if else-if ditambahkan padanya.
- Sekiranya “nilai==HIDUP” , togol nilai kepada “MATI”. Jika nilainya ialah DIMATIKAN, maka nilai akan ditukar kepada “ HIDUP” .
Pengeluaran
Output menunjukkan bahawa butang telah ditogol daripada DIMATIKAN kepada HIDUP .
Itu sahaja! Anda telah belajar untuk menogol butang dalam JavaScript.
Kesimpulan
Dalam JavaScript, butang boleh digunakan untuk menogol antara pelbagai keadaan nilainya sendiri, atau sebarang fungsi boleh dikaitkan dengan operasi togol. The onclick() peristiwa butang dikaitkan dengan fungsi. Artikel ini menerangkan gambaran keseluruhan menogol butang bersama-sama dengan dua contoh praktikal. Contoh pertama mengekstrak teks dengan innerHTML harta dan mengubah suainya melalui butang togol. Dalam contoh kedua, nilai butang itu sendiri diubah menggunakan fungsi tersuai.