Butang onclick HTML
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
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Sempadan Jadual dalam HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.
HTML jidar-kiri
Sep 04, 2024 pm 04:48 PM
Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.
Jadual Bersarang dalam HTML
Sep 04, 2024 pm 04:49 PM
Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.
Susun Atur Jadual HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.
Senarai Tertib HTML
Sep 04, 2024 pm 04:43 PM
Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing
Pemegang Tempat Input HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.
Memindahkan Teks dalam HTML
Sep 04, 2024 pm 04:45 PM
Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.
Butang onclick HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.
