Jumat, 03 Februari 2017

Kalkulator Sederhana Meggunakan HTML dan JavaScript

Hai kawan, Kali ini kita akan belajar bagaimana membuat aplikasi sederhana mengguanakan HTML dan JavaScript. Kalkulator yang akan kita bu... thumbnail 1 summary
Hai kawan, Kali ini kita akan belajar bagaimana membuat aplikasi sederhana mengguanakan HTML dan JavaScript. Kalkulator yang akan kita buat ini akan melakukan aksi penjumlahan, pengurangan, perkalian dan pembagian. Mari kita mulai......

Pertama kita buat dulu file dengan nama kalkulator.html, dan tuliskan koding HTML berikut ini:

 <html>
<head>
<title>Kalkulator Sederhana</title>
</head>
<body>
     <form>
          <table>
             <tr>
                 <td>Inputan 1</td>
                  <td>:</td>
                  <td><input type="text" id="a" name="a"></td>
             </tr>  
              <tr>
                 <td>Inputan 2</td>
                  <td>:</td>
                  <td><input type="text" id="b" name="b"></td>
             </tr> 
              <tr>
                 <td>Hasil</td>
                  <td>:</td>
                  <td><input type="text" id="a" name="a"></td>
             </tr>
             <tr>
                  <td></td><td></td>
                  <td><input type="button" value="+" onClick="tambah()">
                          <input type="button" value="-" onClick="kurang()">
                         <input type="button" value="x" onClick="kali()">
                         <input type="button" value="/" onClick="bagi()">
             </tr>
          </table>
    </form>
</body>
</html>

Setelah koding tersebut dijalankan, maka akan menghasilkan form seperti berikut:


Form tersebut masih belum bisa dijalankan untuk aksi penjumlahan, pengurangan, perkalian dan pembagian karena kita belum menambahkan javascript didalamnya. Untuk dapat menjalanka aksi penjumlahan, pengurangan, perkalian dan pembagian, maka akan kita buat javascripnya untuk menjalankan aksi tersebut. berikut koding untuk javascripnya (letakkan diantara <head> "javascript" </head>).

<script text="text/javascript">
     function tambah(){ 
      a=eval(document.getElementById("a").value);
      b=eval(document.getElementById("b").value);
      c=a+b;
      document.getElementById("hasil").value=c;
       }
</script> 
<script text="text/javascript">
       function kurang(){ 
      a=document.getElementById("a").value;
      b=document.getElementById("b").value;
      c=a-b;
      document.getElementById("hasil").value=c;
       }
</script>
<script text="text/javascript">
       function kali(){ 
      a=document.getElementById("a").value;
      b=document.getElementById("b").value;
      c=a*b;
      document.getElementById("hasil").value=c;
       }
</script>
<script text="text/javascript">
       function bagi(){ 
      a=document.getElementById("a").value;
      b=document.getElementById("b").value;
      c=a/b;
      document.getElementById("hasil").value=c;
       }
</script> 

Untuk lebih jelasnya, kita bisa lihat koding lengkapnya seperti dibawah ini:

<html>
<head>
<title>Kalkulator Sederhana</title>
<script text="text/javascript">
     function tambah(){ 
      a=eval(document.getElementById("a").value);
      b=eval(document.getElementById("b").value);
      c=a+b;
      document.getElementById("hasil").value=c;
       }
</script> 
<script text="text/javascript">
       function kurang(){ 
      a=document.getElementById("a").value;
      b=document.getElementById("b").value;
      c=a-b;
      document.getElementById("hasil").value=c;
       }
</script>
<script text="text/javascript">
       function kali(){ 
      a=document.getElementById("a").value;
      b=document.getElementById("b").value;
      c=a*b;
      document.getElementById("hasil").value=c;
       }
</script>
<script text="text/javascript">
       function bagi(){ 
      a=document.getElementById("a").value;
      b=document.getElementById("b").value;
      c=a/b;
      document.getElementById("hasil").value=c;
       }
</script> 
 </head>
<body>
     <form>
          <table>
             <tr>
                 <td>Inputan 1</td>
                  <td>:</td>
                  <td><input type="text" id="a" name="a"></td>
             </tr>  
              <tr>
                 <td>Inputan 2</td>
                  <td>:</td>
                  <td><input type="text" id="b" name="b"></td>
             </tr> 
              <tr>
                 <td>Hasil</td>
                  <td>:</td>
                  <td><input type="text" id="a" name="a"></td>
             </tr>
             <tr>
                  <td></td><td></td>
                  <td><input type="button" value="+" onClick="tambah()">
                          <input type="button" value="-" onClick="kurang()">
                         <input type="button" value="x" onClick="kali()">
                         <input type="button" value="/" onClick="bagi()">
             </tr>
          </table>
    </form>
</body>
</html>

Hasil untuk aksi penjumlahan:


Terima Kasih Telah Berkunjung, Semoga Bermanfaat.....!!!!

8 komentar

  1. NINA BELLA3 Oktober 2018 pukul 19.08

    wiihhh..keren, thanks kak udah di tunjukkin coding Kalkulator Sederhana Meggunakan HTML dan JavaScript... jadi saya tau perbedaannya

    jangan lupa kunjungi website kampus saya : http://www.atmaluhur.ac.id
    dan juga website saya : http://ninabella.mahasiswa.atmaluhur.ac.id/

    BalasHapus
  2. Unknown27 Oktober 2018 pukul 11.50

    Gak bisa di total nih gan. Gimana yak ada saran gak???

    BalasHapus
  3. Unknown28 Oktober 2018 pukul 14.51

    ngg bisa nih kak ... kesalahan atau kekurangannya dimana yak?

    BalasHapus
  4. Unknown27 Februari 2019 pukul 09.31

    id hasil bukan a tapi c

    BalasHapus
  5. Unknown24 Maret 2020 pukul 21.23

    Nggak bisa coba cek lagi!!!

    BalasHapus
  6. Alief8 Mei 2020 pukul 00.46

    Fungsi Eval Untuk Ap Bang?

    BalasHapus
  7. Anonim23 September 2021 pukul 11.12

    Bagi yang gak bisa,
    Bagian document.getElementById("hasil").value=c;.
    "hasil" diganti c

    BalasHapus

Langganan: Posting Komentar (Atom)