Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Efek Ketika Melakukan Klik HTML Menggunakan Atribut OnClick

Dipublikasikan Oleh: elfanmauludi 7 komentar
Atribut event onclick merupakan atribut yang bekerja ketika user melakukan klik pada salah satu tombol html. Ketika mouse melakukan klik pada elemen yang terdapat pada salah satu tombol tersebut, maka script kode yang menyertainya akan mulai bekerja.


Sebelum memahami lebih dalam materi tentang Efek Ketika Melakukan Klik HTML Menggunakan Atribut OnClick, terlebih dahulu pelajari materi tentang: Efek Setelah Menekan Tombol HTML Menggunakan Atribut OnKeyUp, Efek Tika Menekan Tombol HTML Menggunakan Atribut OnKeyDown, dan Efek Ketika Melakukan Submit HTML Menggunakan Atribut OnSubmit.

Berikut diperlihatkan ilustrasi penggunaan atribut event onclick pada html dimana sebuah tombol yang di klik akan menampilkan tanggal dan waktu pada html.

Baca Juga:

Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<h2>

Blog Elfan

</h2>

 

<h3>

atribut event onclick

</h3>

 

<span>

Klik tombol untuk melihat waktu dan tanggal.

</span>

 

<button 

onclick="getElementById('time').innerHTML= Date()">

Tampilkan tanggal

</button>

 

<p id="time"></p>

 

</body>

 

</html>

Output:

Blog Elfan

atribut event onclick

Klik tombol untuk melihat waktu dan tanggal.





Sintak: <element onlick = "script">

Value Atribut: mengandung script nilai tunggal yang bekerja ketika mouse melakukan klik pada suatu element.

Tag Pendukung: atribut onclick didukung pengggunaannya oleh semua elemen yang terdapai pada elemen html, kecuali.
  • <base>
  • <bdo>
  • <br>
  • <head>
  • <html>
  • <iframe>
  • <meta>
  • <param>
  • <script>
  • <style>
  • <title>

Contoh: ketika menekan tombol "click here", maka teks "ahh, jangan ditekan" akan muncul.

<!DOCTYPE HTML>

<html>

 

<head>

<title>

atribut event onclick

</title>

 

<script>

/* Jika event onclick

 dipanggil, maka script

 berikut akan dijalankan */

function onclick_event() 

{

document.getElementById("bang").innerHTML =

"ahh, jangan ditekan";

}

</script>

</head>

 

<body>

 

<h2>

Blog Elfan

</h2>

 

<h3>

atribut event onclick

</h3>

 

<!-- event onclick dipanggil -->

<p 

id="bang" 

onclick="onclick_event()">

Click Here

</p>

 

</body>

 

</html>

Output:

Blog Elfan

atribut event onclick

Click Here



Contoh: penggunaan tombol untuk memanggil event.

<!DOCTYPE html>

<html>

 

<head>

<title> 

atribut event onclick

</title>

 

<script>

document.getElementById("bang").addEventListener("click",functionClick);

function functionClick() {document.getElementById("bang").innerHTML ="ahh, pelan-pelan";}

</script>

</head>

 

<body>

 

<h2>

Blog Elfan

</h2>

 

<h3>

atribut event onclick

</h3>

 

<!-- event onclick dipanggil -->

<button 

onclick="functionClick()">

Click Here 

</button>

 

<p id="bang"></p>

 

</body>

 

</html>

Output:

Blog Elfan

atribut event onclick


Artikel ini didedikasikan kepada: Dewi Sri Lestari, Dina Muassaroh, Fadhiya Andini Maula, Fadilla Barochatul Subekti, dan Fajar Wahyu Pratama.
Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

7 komentar untuk "Efek Ketika Melakukan Klik HTML Menggunakan Atribut OnClick"

  1. AnonimMinggu, 10 Oktober 2021 pukul 07.11.00 WIB

    Apa fungsi dari atrbut onclick pada elemen html?

    BalasHapus
    Balasan
    1. AnonimMinggu, 10 Oktober 2021 pukul 07.11.00 WIB

      Atribut onclick merupakan atribut yang berfungsi sebagai pengenladi peristiwa yang menginstruksikan browser untuk menjalankan script ketika user menglik tombol.

      Hapus
  2. AnonimMinggu, 10 Oktober 2021 pukul 07.13.00 WIB

    Apa yang dimaksud dengan atribut onclick pada elemen html?

    BalasHapus
    Balasan
    1. AnonimMinggu, 10 Oktober 2021 pukul 07.13.00 WIB

      onclick merupakan atribut dari button atau object gambar. Atribut ini berisi ekspresi yang dievaluasi ketika user mengklik tombol atau gambar tersebut, yang memungkinkan user untuk melakukan tindakan lebih dari sekadar mengevaluasi variabel.

      Hapus
  3. AnonimMinggu, 10 Oktober 2021 pukul 07.14.00 WIB

    Browser apa saja yang mendukung penggunaan atribut onclick pada html tersebut?

    BalasHapus
    Balasan
    1. AnonimMinggu, 10 Oktober 2021 pukul 07.15.00 WIB

      Atribut event onclick mengeksekusi script ketika tombol diclick. Atribut ini didukung penggunaannya oleh segala jenis browser yang juga digunakan untuk memanggil fungsi ketika tombol tersebut diklik.

      Hapus
    2. AnonimMinggu, 10 Oktober 2021 pukul 07.16.00 WIB

      1. Google Chrome 93.0
      2. Microsoft Edge 93.0
      3. Firefox 93.0
      4. Safari 14.1
      5. Opera 79.0

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -