Cara Membuat Aritmatika dengan Javascript

Hai ketemu Hero lagi nih, ini postingan kedua saya. Kali ini saya akan menjelaskan tentang cara membuat aritmatika dengan javascript. Aritmatika ini nantinya akan berisi tentang penjumlahan, pengurangan, dan perkalian. Langsung saja kita praktekkan.
Seperti postingan yang sebelumnya, kita buat dulu coding di notepad++ seperti ini.


<html>
<head>
          <title>
                              Program Aritmatika
                    </title>
</head>
<body>

</body>
</html>




Jangan lupa di save, kali ini kita simpan dengan nama “aritmatika 1.html”. Simpan di folder yang kalian inginkan.



Lalu, di bagian body kita isi dengan coding seperti ini.

<html>
            <head>
                        <title>
                                    Program Aritmatika
                        </title>
            </head>
            <body>
                        <div class="tengah">
                        <h3>Program Aritmatika</h3>
                                    <div>
                                                <label> Bilangan 1 </label>
                                                <input type="txt" id="txtbil1"/>
                                    </div>
                                    <div>
                                                            <label> Bilangan 2 </label>
                                                            <input type="text" id="txtbil2"/>
                                    </div>
                                    <div>
                                    <label>Hasil</label>
                                    <label style="width:175px; font-style:bold;" id="lblhasil">Hasil</label>
                                    </div>
                                    <div>
                        <input type="button" id="btnjumlah" value="penjumlahan" onclick="jumlah()"/>
<input type="button" id="btnjumlah" value="perkalian" onclick="kali()"/>
                        <input type="button" id="btnjumlah" value="pengurangan" onclick="kurang()"/>
                                    </div>
                        </div>
            </body>
</html>



Berbeda dari postingan yang lalu, kali ini saya akan meletakkan javascript di bagian body. Fungsinya, javascript tersebut akan memroses pengoperasian aritmatika ketika tombol di klik. Tambahkan style agar tampilannya lebih menarik.

<html>
            <head>
                        <title>
                                    Program Aritmatika
                        </title>
<style>
                        .tengah
                        {
                                    margin: auto;
                                    width: 50%;
                                    border: 5px solid pink;
                                    padding: 10px;
                                    text-align: center
                        }
                        label
                        {
                                    width: 70px;
                                    display: inline-block;
                        }
                       
            </style>
            </head>
            <body>
                        <div class="tengah">
                        <h3>Program Aritmatika</h3>
                                    <div>
                                                <label> Bilangan 1 </label>
                                                <input type="txt" id="txtbil1"/>
                                    </div>
                                    <div>
                                                            <label> Bilangan 2 </label>
                                                            <input type="text" id="txtbil2"/>
                                    </div>
                                    <div>
                                    <label>Hasil</label>
                                    <label style="width:175px; font-style:bold;" id="lblhasil">Hasil</label>
                                    </div>
                                    <div>
                        <input type="button" id="btnjumlah" value="penjumlahan" onclick="jumlah()"/>
<input type="button" id="btnjumlah" value="perkalian" onclick="kali()"/>
                        <input type="button" id="btnjumlah" value="pengurangan" onclick="kurang()"/>
                                    </div>
                        </div>
<script>
                                    function jumlah()
                                    {
                                   
                                                var bil1 = document.getElementById("txtbil1").value;
                                                var bil2 = document.getElementById("txtbil2").value;
                                               
                                                var hasil = parseInt(bil1) + parseInt(bil2);
                                               
                                                document.getElementById("lblhasil").innerHTML = hasil;
                                    }
                        </script>
                       
                        <script>
                                    function kali()
                                    {
                                   
                                                var bil1 = document.getElementById("txtbil1").value;
                                                var bil2 = document.getElementById("txtbil2").value;
                                               
                                                var hasil = parseInt(bil1) * parseInt(bil2);
                                               
                                                document.getElementById("lblhasil").innerHTML = hasil;
                                    }
                        </script>
                       
                        <script>
                                    function kurang()
                                    {
                                   
                                                var bil1 = document.getElementById("txtbil1").value;
                                                var bil2 = document.getElementById("txtbil2").value;
                                               
                                                var hasil = parseInt(bil1) - parseInt(bil2);
                                               
                                                document.getElementById("lblhasil").innerHTML = hasil;
                                    }
                        </script>
            </body>
</html>


Setelah semua sudah siap, tinggal kita jalankan. Pilih “Jalankan > Launch In Chrome”.




Hasilnya nanti akan seperti ini. Cara mengoperasikannya adalah dengan memasukkan angka kebagian Bilangan 1, lalu kalian masukkan lagi angka kebagian Bilangan 2. Setelah itu, klik tombol pada pengoperasian hitungan yang kalian inginkan.




Selesai, cukup sekian dari saya. Saya mohon maaf kalau ada salah-salah kata, terus kasih komentar kalian ya..

Komentar

Postingan populer dari blog ini

Graph Berbobot (Weighted Graph)