Cara menggunakan javascript on click element

Question

Hallo sobat, tulisan kali ini Saya ingin membahas tentang pengenalan dan bagaimana cara menggunakan EVENT pada JavaScript. EVENT pada JavaScript adalah sebuah kejadian yang terjadi pada suatu elemen. Misalnya, Anda mempunyai sebuah button “show” pada aplikasi, dan saat button tersebut di klik akan menampilkan sebuah alert/notifikasi. Untuk menerapkan itu, Anda harus memasukan atribut EVENT onclick pada elemen button tersebut dan mengisinya dengan sebuah function atau kode JavaScript inline yang berisi kejadian yang Anda inginkan. Itulah penjelasan singkat dan contoh pengandaian dari EVENT JavaScript, mudah-mudahan sobat semua paham ya.

Table of Contents Show

OnMouseOver & OnMouseOut
Apa itu onclick javascript?
Bagaimana cara memanggil fungsi di javascript?
2 Apakah nama event yang terjadi ketika user meng klik suatu element HTML?
Apa itu OnMouseOut?

JavaScript telah menyediakan banyak keyword EVENT canggih. Namun pada tulisan ini Saya akan mengenalkan event-event JavaScript yang paling sering digunakan saja, di antaranya yaitu:

OnClick
OnChange
OnMouseOver & OnMouseOut
OnKeyDown
OnLoad

Yuk, mari kita bahas satu persatu EVENT JavaScript di atas langsung dengan contohnya.

OnClick

OnClick adalah suatu kerjadian yang terjadi ketika sebuah elemen html di klik.

<!DOCTYPE html>
<html>
<body>
<p>This example demonstrates how to assign an "onclick" event to a p element.</p>
<p id="demo" OnClick="myFunction()">Click me.</p>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}
</script>
</body>
</html>

OnChange

OnChange adalah suatu kejadian yang terjadi ketika sebuah elemen html berubah.

<!DOCTYPE html>
<html>
<body>
<p>Select a new car from the list.</p>
<select id="mySelect" OnChange="myFunction()">
  <option value="Audi">Audi</option>
  <option value="BMW">BMW</option>
  <option value="Mercedes">Mercedes</option>
  <option value="Volvo">Volvo</option>
</select>
<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>
<p id="demo"></p>
<script>
function myFunction() {
  var x = document.getElementById("mySelect").value;
  document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>
</body>
</html>

Baca Juga: Membuat RESTful API Sederhana dengan PHP

OnMouseOver & OnMouseOut

OnMouseOver adalah suatu kejadian yang terjadi ketika sebuah elemen html di letakkan cursor mouse. OnMouseOut adalah suatu kejadian yang terjadi ketika cursor mouse meninggalkan elemen html.

<!DOCTYPE html>
<html>
<body>
<p>This example demonstrates how to assign an "onmouseover" and "onmouseout" event to a h1 element.</p>
<h1 id="demo" OnMouseOver ="mouseOver()" OnMouseOut="mouseOut()">Mouse over me</h1>
<script>
function mouseOver() {
  document.getElementById("demo").style.color = "red";
}
function mouseOut() {
  document.getElementById("demo").style.color = "black";
}
</script>
</body>
</html>

OnKeyDown

OnKeyDown adalah suatu kejadian yang terjadi ketika ada pengetikan pada elemen html.

<!DOCTYPE html>
<html>
<body>
<p>A function is triggered when the user is pressing a key in the input field.</p>
<input type="text" id="input" onkeydown="myFunction()">
<div id="text"></div>
<script>
function myFunction() {
   var inputText = document.getElementById("input").value;
   document.getElementById("text").innerHTML = inputText;
}
</script>
</body>
</html>

OnLoad

OnLoad adalah suatu kejadian yang terjadi ketika elemen dan halaman di buka.

<!DOCTYPE html>
<html>
<body OnLoad="myFunction()">
<h1>Hello World!</h1>
<script>
function myFunction() {
  alert("Page is loaded");
}
</script>
</body>
</html>

Demikian pembahasan tentang Mengenal dan Cara Menggunakan EVENT pada JavaScript, jika ingin mengetahui keyword EVENT lainnya Anda bisa kunjungi link berikut ini LINK. Semoga tulisan ini bisa memberikan manfaat untuk Anda yang membaca. Sampai jumpa di tulisan berikutnya. Terima Kasih

Dalam artikel kali ini akan mempelajari fungsi onclick(), Onclick adalah event dalam javascript yang memberikan aksi ketika mouse melakukan klik pada element HTML. Jadi misalnya ketika anda mengeklik sebuah tombol di halaman website atau aplikasi, kita dapat menggunakan event onclick untuk memberikan sebuah aksi seperti menampilkan pesan atau sebagainya.

Ok langsung saja pada contoh penggunaan event onclick dalam javascript ini, silahkan buat file .html dan jalan program di bawah ini.

Program Penggunaan Fungsi Event Onclick() Di Javascript

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Hardifal.com</title>
</head>
<body>

 <button onclick="klik()">Klik Saya</button>

 <p id="demo">Teks ini akan berubah</p>

<script>
 function klik(){
  document.getElementById("demo").innerHTML = " Hello World !";
 }
</script>

</body>
</html>

Hasil :

Saya telah memeberikan sebuah event apabila tombol di klik ketika pengguna mengeklik button klik saya, akan mengubah teks paragraph dengan Hello World !

Selain cara penggunaan event onclik diatas, ada juga cara kedua menggunakan fungsi onclick pada javascript ini. Perhatikan program berikut

.

Cara Kedua Penggunaan Onclick Dalam Javascript

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Hardifal.com</title>
</head>
<body>

 <button>Klik Saya</button>

<script>
 var btn = document.querySelector('button');
 btn.onclick = function(){
  alert('Halo, ini adalah pesan ketika anda klik tombol');
 }
</script>
</body>
</html>

Jika anda perhatikan program diatas, bedanya ialah tidak menggunakan event onclick pada tag HTML dan menghapus function klik() di script javascript-nya. Dengan menggunakan document.querySelector() dalam javascript-nya untuk mengambil seleksi sebuah element pada tag html.

Apa itu onclick javascript?

onclick adalah atribut HTML untuk menentukan aksi saat event klik pada sebuah elemen. Atribut ini bisa diisi dengan nama fungsi atau ekspresi javascript. Selain event onclick ada juga event lainnya seperti onchange , onmouseover , onkeyup , onload , dll.

Bagaimana cara memanggil fungsi di javascript?

Cara Memanggil/Eksekusi Fungsi Kita bisa memanggil fungsi di dalam kode Javascript dengan menuliskan nama fungsinya seperti ini: namaFungsi(); Contoh: // membuat fungsi function sayHello(){ console.log("Hello World!"); } // memanggil fungsi sayHello() // maka akan menghasilkan -> Hello World!