Butang onclick HTML-html tutorial-php.cn

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 teg, ia akan digunakan dan perlu menambah acara onclick dalam unsur. Kemudian teg butang berjalan pada skrip apabila butang dipanggil atau diklik oleh hujung pengguna. Ia berjalan pada baris kod tertentu dalam objek HTML yang mempunyai atribut onclick.

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 elemen dalam acara Onclick, ia akan memanggil fungsi seperti Javascript, dsb.…Atribut acara onclick pada asasnya mengandungi hanya satu nilai untuk skrip yang berfungsi pada bahagian belakang acara.

Sintaks:

<button  name="" value="" onclick<strong> ="</strong>function()"/>

Salin selepas log masuk

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>

Salin selepas log masuk

Output:

Butang onclick HTML

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>

Salin selepas log masuk

Output:

Butang onclick HTML

Contoh di atas juga sama seperti yang kita bincangkan dalam contoh 1 sebelum ini, tetapi di sini kita tidak menggunakan sebarang teg, sebaliknya kami memanggil terus fungsi dan acara dalam

tag(perenggan) tag. Jadi ia akan mengurangkan baris kod.

Contoh #3

Kod:

<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>

Salin selepas log masuk

Output:

Butang onclick HTML

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.

Acara OnClick dalam Pelbagai Acara

Atribut sifat onclick yang digunakan oleh beberapa acara lain, seperti pengendali acara global, juga merupakan salah satu mekanisme pengendali acara di bawah pengendali Acara yang digunakan untuk memproses acara klik dalam Elemen HTML. Setiap kali acara klik dinaikkan selepas permintaan pengguna, ia menyala selepas acara tetikus ke bawah dan tetikus ke atas dalam beberapa tertib.
Acara Klik juga mempunyai beberapa tindakan pencetus; pertimbangkan untuk menambah tindakan yang sama pada acara "key-down" dibenarkan untuk menggunakan tindakan yang sama oleh pengguna yang tidak menggunakan penunjuk tetikus mahupun skrin sentuh. Kami mempunyai beberapa fungsi inbuild dalam javascript untuk acara onclick.
Jika fungsi menerima objek MouseEvent sebagai hujah tunggalnya, fungsi ini juga akan menjadi elemen acara yang akan dicetuskan. Hanya satu pengendali acara klik akan diberikan untuk satu objek pada satu masa. Jika anda menggunakan kaedah EventTarget.addEventListener(), kerana kaedah ini lebih fleksibel.

Sebagai contoh, jika kita ingin menukar warna nilai yang diberikan selepas satu klik.

<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>

Salin selepas log masuk

Output:

Butang onclick HTML

Dalam contoh di atas, kami baru sahaja memanggil acara klik untuk menukar warna teks pada skrin pengguna. Seperti kebanyakan fungsi pencetus peristiwa, ia mungkin berguna untuk prospektus masa jalan serta keperluan pengguna.
Acara Onclick juga merupakan atribut untuk objek gambar; juga, ia mengandungi ungkapan yang dinilai apabila pengguna mengklik butang atau objek gambar. Acara onclick juga melakukan beberapa perkara yang berbeza bergantung pada bahagian imej yang ingin diklik oleh pengguna. Umumnya, pengendali boleh ditetapkan dalam atribut html seperti apabila pengguna mengklik menggunakan kursor tetikus kod di dalam onclick berjalan, nama atribut html tidak sensitif huruf besar dan kecil, jadi onclick berfungsi seperti onClick, tetapi biasanya, atribut digunakan dalam huruf kecil.
Jika kami menggunakan teg borang untuk mengakses halaman web perkara yang sama apabila kami menekan butang alih, pengawal boleh mengesahkan keperluan pengguna dalam logik bahagian belakang dan menunjukkan paparan hasil. Ia juga memuat semula halaman web; Kadangkala acara onclick tidak berfungsi dalam pengesahan javascript, iaitu skrip halaman html di mana sahaja memanggil fungsi dalam acara onclick pengguna mesti perlu menyemak dan juga menamakan semula fungsi itu tidak berfungsi pada masa itu jika fungsi onclick() ditakrifkan dalam input pengguna atau butang suka ia mendapat keutamaan yang lebih tinggi daripada fungsi javascript.

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.

Kesimpulan

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!