Kalkulator sederhana Javascript

Artikel ini merupakan potongan kode sederhana untuk membuat sebuah kalkulator dengan menggunakan Javascript.

Javascript

Pertama buat sebuah fungsi javascript untuk menghitung angka yang diinput.

function hitung(pilihan)
{
    var bil1=document.getElementById('angka1').value;
    var bil2=document.getElementById('angka2').value;
    bil1 = parseInt(bil1)
    bil2 = parseInt(bil2)
    if (pilihan=='tambah'){
        document.getElementById('hasil').value = bil1 + bil2;
    }
    else if(pilihan == 'kurang'){
        document.getElementById('hasil').value = bil1 - bil2;
    }
    else if(pilihan == 'kali'){
        document.getElementById('hasil').value = bil1 * bil2;
    }
    else {
        document.getElementById('hasil').value = bil1 / bil2;
    }
    document.getElementById('hasil').style.backgroundColor="#CCC";
}

Keterangan :

1. function hitung(pilihan)
   1. hitung adalah nama method
   2. pilihan adalah parameter yang digunakan dalam method hitung, proses perhitungan akan dilihat dari nilai parameternya
2. var bil1=document.getElementById(‘angka1’).value;Artinya, variabel bil1 bernilai sesuai dengan nilai (value) pada element yang memiliki id angka1
3. bil1 = parseInt(bil1)parseInt(bil1), artinya konversi nilai bil1 menjadi tipe integer
4. if (pilihan==’tambah’)artinya, jika nilai dari parameter pilihan adalah ‘tambah’
5. document.getElementById(‘hasil’).value = bil1 + bil2;Artinya, mengatur nilai dari element yang memiliki id ‘hasil’ dengan nilai dari (bil1 + bil2)
6. document.getElementById(‘hasil’).style.backgroundColor=”#CCC”;Menyisipkan style css (backgroundColor) pada element yang memiliki id ‘hasil’

HTML

<pre>
<input name="bil1" type="text" value="" id="angka1" />
<input name="bil2" type="text" value="" id="angka2" />

<input name="hitung" type="radio" value="tambah" onclick="hitung(this.value)"/>tamba>
<input name="hitung" type="radio" value="kurang" onclick="hitung(this.value)"/>kuran>
<input name="hitung" type="radio" value="kali" onclick="hitung(this.value)"/>kal>
<input name="hitung" type="radio" value="bagi" onclick="hitung(this.value)"/>bag>

<input name="hasil" type="text" value="0" id="hasil" />
</pre>

Keterangan

<input name="hitung" type="radio" value="tambah" onclick="hitung(this.value)"/>tambah

onclick=”hitung(this.value)”, artinya memanggil method hitung dengan nilai (value) dari element tersebut pada saat element tersebut di klik

Alfa Adhitya Member since December 18, 2019

Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter – Eric S