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
Posting Komentar