Memahami dan Penggunaan Fungsi Onchange Event Pada Javascript

Memahami fungsi onchange event di javascript
Seperti yang kita ketahui, terdapat macam-macam fungsi event dalam javascript seperti onclick, onchange, onmouseover, onmouseout, onkeydown dan onload. Pada artikel kali ini akan mengenal dan memahami fungsi event onchange() pada javascript.

Onchange Event adalah fungsi untuk melakukan aksi atau event tertentu apabila isi dari value input box berubah. Jadi akan melakukan aksi pada sebuah element saat memberikan nilai/value pada input-box seperti (text, radio atau check).

Agar lebih mudah memahami, berikut cara penggunaan fungsi onclick di javascript.


Contoh Program Onchange Event Di Javascript

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Hardifal.com</title>
</head>
<body>
 <input type="text" id="nilai" onchange="pilih()">

<script>
 function pilih(){
  var n = document.getElementById('nilai');
  n.value= n.value.toUpperCase();
 }
</script>
</body>
</html>

Pada program sederhana penggunaan onchange event di javascript ini saya memberikan nilai/ value dengan huruf kapital toUpperCase()

Hasil :
Gambar gif Cara penggunaan onchange event di javascript
Adapun cara kedua untuk penggunaan onchange event dengan menghapus fungsi onchange="" pada tag html-nya, sebagai berikut.
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Hardifal.com</title>
</head>
<body>
 <input type="text" id="nilai">

<script>
 document.getElementById("nilai").onchange = function() {pilih()};

 function pilih(){
  var n = document.getElementById('nilai');
  n.value= n.value.toUpperCase();
 }
</script>
</body>
</html>

Hasilnya sama saja seperti program pertama diatas. Namun dari kedua cara membuat onchange() event javascript ini bisa anda pelajari.

Pelajari juga event lainnya :

No comments for "Memahami dan Penggunaan Fungsi Onchange Event Pada Javascript"