Biasanya jika kita melakukan perhitungan dengan PHP, maka kita harus memasukan bilangan dan menekan tombol submit. Bagaimana kalo kita ingin menghitung ulang bilangan yang lain. Tentu akan sangat merepotkan jika kita harus menekan tombol submit atau enter terus menerus.
Nah pada tutorial kali ini kita akan membuat alat hitung otomatis tanpa penekanan tombol submit, tepatnya dengan menggunakan event onKeyup() javascript.
Algoritma Program :
1. Buatlah form html berupa 3 form text dan 1 form botton
2. Buat function javascript berupa variable untuk menyimpan value bil A , value Bil B dan value Bil C atau hasil
3. Ambil value Bil A, Bil B, dan Bil C=Bil A+ Bil B dengan menggunakan document.getElementById("id")
4. Dengan event onKeyup() panggil nama function javascript yang tadi kita buat
Source Code Program :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Menambah bilangan secara otomatis</title>
</head>
<body>
<script type="text/javascript">
function tambah(){
//nilai pertamaa
var nilai1=document.getElementById("val1").value;
//nilai kedua
var nilai2=document.getElementById("val2").value;
//operasi tambah
var tambah=parseInt(nilai1)+parseInt(nilai2);
//menampilkan hasil tambah
document.getElementById("hasil").value=parseInt(tambah);
}
function refresh(){
//mengosongkan form
document.getElementById("val1").value="";
document.getElementById("val2").value="";
document.getElementById("hasil").value="";
}
</script>
<h2>Program Menambah Bilangan Secara Otomatis</h2>
<input type="text"name="n1"id="val1" onkeyup="tambah()" maxlength="15"> +
<input type="text"name="n2"id="val2" onkeyup="tambah()"maxlength="15">
=<input type="text"id="hasil">
<input type="button" value="Clear"onclick="refresh()">
</body>
</html>Ketik kode program diatas dengan editor kesayangan anda, dan simpan dengan nama tambah_otomatis.html
selanjutnya run ke browser......
Selamat mencoba....:-))
0 comments:
Poskan Komentar