Rumah > Artikel > hujung hadapan web > Butang onclick HTML
Butang onclick HTML
- WBOYasal
- 2024-09-04 16:49:36354semak imbas
Dalam HTML, kami mempunyai butang untuk menyerahkan data permintaan pengguna ke pelayan(belakang) untuk mengesahkan dan menavigasi halaman web. Terutamanya, jika kami menggunakan butang onclick untuk atribut acara dan disokong oleh semua penyemak imbas, Begitu juga ciri keserasian penyemak imbas di mana-mana sahaja kami menggunakan fungsi acara ini dalam skrip kami. Peristiwa muncul apabila pengguna mengklik pada
Menggunakan Butang onclick
Terutamanya ia akan digunakan untuk mencetuskan dan memanggil fungsi di mana sahaja pengguna perlu mengklik pada butang. Jika pengguna mengklik pada tetikus melalui
Sintaks:
<button name="" value="" onclick<strong> ="</strong>function()"/>
Sintaks di atas ialah penggunaan asas acara onclick dalam atribut html. Kami juga menyesuaikan acara di mana sahaja yang kami perlukan iaitu keperluan pengguna.
Contoh HTML onclick Button
Di bawah diberikan adalah contoh butang onclick dalam html:
Contoh #1
Kod:
<html>
<body>
<button onclick="Function()">Click</button>
<p id="sample"></p>
<script>
function Function() {
document.getElementById("sample").innerHTML = "Welcome";
}
</script>
</body>
</html>
Output:
Dalam contoh di atas, kami telah mencipta fungsi javascript; tambahan, apabila pengguna mengklik butang "klik", ia akan memaparkan nilai "Selamat Datang" dalam penyemak imbas itu sendiri.
Contoh #2
Kod:
<html>
<body>
<p id="sample" onclick="Function()">Click</p>
<script>
function Function() {
document.getElementById("sample").innerHTML = "Welcome";
}
</script>
</body>
</html>
Output:
Contoh di atas juga sama seperti yang kita bincangkan dalam contoh 1 sebelum ini, tetapi di sini kita tidak menggunakan sebarang tag(perenggan) tag. Jadi ia akan mengurangkan baris kod. Kod: Output: Dalam contoh di atas, kami memanggil fungsi JavaScript untuk menyalin nilai daripada nama pengguna ke kata laluan selepas memilih butang "klik" yang disalin secara automatik daripada nama pengguna ke kata laluan. Ia adalah salah satu operasi asas untuk acara onclick. Sebagai contoh, jika kita ingin menukar warna nilai yang diberikan selepas satu klik. Output: Di sini, beberapa cadangan yang perlu berguna untuk menggunakan acara onclick dalam teg html. 1. Jangan gunakan onclick=”javascript:function()”,hanya gunakan javascript : seperti awalan di dalam atribut seperti href hyperlink: 2. Kami tidak berakhir dengan koma bertitik seperti onclick="function()" dan onclick="function();" kedua-duanya akan berfungsi dengan baik, tetapi ini bukan amalan yang baik untuk menggunakan koma bertitik untuk fungsi berakhir. 3. Atribut acara seperti onclick,onCLICK dan ONCLICK semuanya akan berfungsi, tetapi dalam amalan biasa, kami menulis atribut seperti huruf kecil, malah javascript itu sendiri sensitif huruf besar-besaran, apabila kami menulis seperti document.getElementById().onclick="", maka semuanya mesti huruf kecil. onclick juga merupakan pencetus peristiwa dalam fungsi javascript; ia mungkin berguna untuk pengesahan pengguna dan menavigasi halaman web. Dalam jquery, kami juga menggunakan tindakan acara onclick sebagai bahagian utama keperluan yang ditentukan pengguna. Seperti, react js, angular ialah beberapa rangka kerja lain yang kami gunakan dalam fungsi onclick. Ia juga menyokong kebanyakan penyemak imbas moden pada masa kini seperti google chrome, Mozilla Firefox dan safari, dsb. Dalam javascript, kita boleh mengendalikan bukan sahaja fungsi acara onclick, tetapi ia juga boleh digunakan untuk beberapa atribut lain seperti "pada pilih,serahkan, ontoggle,onkeyup “, dsb.. berdasarkan keperluan pengguna, kami boleh menggunakan atribut acara dalam html. Atas ialah kandungan terperinci Butang onclick HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!Contoh #3
<html>
<body>
Username: <input type="text" id="user" value="sivaraman" ><br>
Password: <input type="text" id="pass"><br><br>
<button onclick="Function()">Click</button>
<script>
function Function() {
document.getElementById("pass").value = document.getElementById("user").value;
}
</script>
</body>
</html>
Acara OnClick dalam Pelbagai Acara
<html>
<body>
<div id="example">Click</div>
<script>
document.getElementById('example').onclick = function changeContent() {
document.getElementById('example').innerHTML = "Welcome to my domain";
document.getElementById('example').style = "Color: green";
}
</script>
</body>
</html>
Kesimpulan