Cara menggunakan function button onclick javascript

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.

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 h2 element.</p>
<h2 id="demo" OnMouseOver ="mouseOver()" OnMouseOut="mouseOut()">Mouse over me</h2>
<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()">
<h2>Hello World!</h2>
<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

kode javascript addEventListener JavaScript Function JavaScript Alert JavaScript