Pencarian

Rabu, 22 Juli 2009

Penjumlahan sederhana dengan Javascript dan HTML

Membuat penjumlahan Sederhana dengan Javascript+html
Caranya sangat mudah, yaitu ketika tombol submit di klik (event onclick), lalu function javascript akan mengambil isi dari angka1 dan angka2, dan dijumlahkan, setelah itu hasil penjumlahan akan diberikan pada input name=total.
Koding lengkapnya :

<title>Belajar</title>
<script LANGUAGE="JavaScript">
function cek(){
if(form.angka1.value == "" || form.angka2.value == ""){
alert("data kosong"); //jika angka kosong maka pesan akan tampil
exit;
}
}
function tambah() {
cek(); //panggil function cek
a=eval(form.angka1.value); //mengisi variabel a dengan isi dari input name angka1
b=eval(form.angka2.value); //mengisi variabel b dengan isi dari input name angka2
c=a+b //menjumlahkan kedua variabel
form.total.value = c; //memberikan hasil penjumlahan ke input name total
}
function kali() {
cek();
a=eval(form.angka1.value);
b=eval(form.angka2.value);
c=a*b
form.total.value = c;
}
function kurang() {
cek();
a=eval(form.angka1.value);
b=eval(form.angka2.value);
c=a-b
form.total.value = c;
}
function bagi() {
cek();
a=eval(form.angka1.value);
b=eval(form.angka2.value);
c=a/b
form.total.value = c;
}
function reset() {
form.angka1.value="";
form.angka2.value="";
form.total.value = "";
}
</script>
<form name="form">
Angka1
<input type=text name="angka1" size=3><br><br>
Angka2
<input name="angka2" type="text" size="3" /><br>
<br>
Hasil <input type="text" value="" name="total" size="9">
<br><br>
<!-- membuat event ketika tombol di klik maka memanggil function javascript -->
<input type=button name=submit onclick="tambah()" value="+">
<input type=button name=submit onclick="kali()" value="X">
<input type=button name=submit onclick="bagi()" value="/">
<input type=button name=submit onclick="kurang()" value="-">
<input type=button name=submit onclick="reset()" value="Reset">
</form>
<!--By:a3m.nix@gmail.com-->

Semoga bermanfaat....

18 komentar:

  1. Bagaimana membuat perhitungan otomatis tanpa ada proses mas di php, misalnya

    Input I = 50
    Operator +
    Input II= 20 = 70
    Hasil = 70 (otomatis tanpa diproses/posting mas)

    terima kasih mas

    BalasHapus
    Balasan
    1. bisa pake event onkeyup(nama fungsi)

      Hapus
  2. maksudny gimana tu mas, klo maksudnya tanpa refresh bisa pake ajax, ntar klo sempat saya post di blog, atau bs coba search via google, XMLHttpRequest :D

    BalasHapus
  3. bagus sekali informasinya....thnas mas..bayakin lagi informasinya

    BalasHapus
  4. Mas, gimana kalau sebuah tomnol "+" bisa menambahkan sebuah nilai..
    Fungsinya sihh untuk menambahkan form yg berisi nilai..

    BalasHapus
  5. Izin di edit sedikit ya pak, trus posting ke blog saya..
    tq

    BalasHapus
  6. Aduh agan makasih yah.. saya tuh dulu paling males bikin penjumlahan di javascript, tapi karena baca blog ini, jadi ngerti fungsi eval :D makasih yah gan

    BalasHapus
    Balasan
    1. bagaimana jika form input itu multiple row....
      misal input data simultan di php agar muncul nilai perkalian dan total sum otomatis dengan menggunakan javascript
      tolong dibantu pencerahannya : send to endra.gst@gmail.com

      Hapus
  7. saya coba di Yii kenapa ga jalan ya mas? tapi kalo reset nya mah jalan

    BalasHapus
  8. thanks brooo...

    erastusblog.blogspot.com

    BalasHapus
  9. jadi gitu y caranya, bru tau saya.

    BalasHapus
  10. Mas gimana cara membuat penjumlahan d javscript

    BalasHapus
  11. kalau isi tabel nya huruf terus mau di jumlah isi recordnya itu gimana?
    (isi record huruf bukan angka)

    BalasHapus