TUTORIAL : Membuat Kalkulator dengan JavaScript

Kalkulator ini merupakan kalkulator sederhana, maka untuk saat ini perhitungan yang dilakukan hanyalah menambah, mengurangi, membagi, dan mengalikan.

Langkah awal tentunya membuat form HTML nya:

<form name="kalkulator">

    <input type="text" name="angka1" />

    <input type="text" name="angka2" />

    <input type="button" onclick="tambah()" value="+" />

    <input type="button" onclick="kurang()" value="-" />

    <input type="button" onclick="bagi()" value="/" />

    <input type="button" onclick="kali()" value="x" />

    <input type="reset" onclick="this.form.reset()" value="reset" />

</form>

= <span id="hasil">0</span>

Dan berikut script Javascript untuk menambah pada function tambah():

function tambah(){

    var hsl=document.getElementById("hasil");

    x=parseFloat(document.kalkulator.angka1.value);

    y=parseFloat(document.kalkulator.angka2.value);

    z=x+y;

    hsl.innerHTML=z;

}

Pada function tersebut, hasil dari penghitungan akan dituliskan di script HTML di bagian id=”hasil”. Diinisialkan dengan variabel hsl.

var hsl=document.getElementById("hasil");

Dan variable tersebut dioutputkan di bagian id=”hasil” dengan fungsi innerHTML.

hsl.innerHTML=z;

Secara default  form input pada HTML bertipe string, oleh karena itu agar dianggap sebagai angka dan bisa dihitung oleh Javascript maka digunakan fungsi parseFloat.

x=parseFloat(document.kalkulator.angka1.value);

Pada bagian ini, document.kalkulator.angka1.value berfungsi untuk mengisi nilai pada form Kalkulator yang diinputkan ke <input type="text" name="angka1" />.

z yang berisi variabel penghitungan dari x (angka1) dan y(angka2) dioutputkan di id=”hasil” dengan

hsl.innerHTML=z;

Untuk selanjutnya buat function kurang(), bagi(), dan kali() pada masing-masing button “-“, “:” dan “x”.

Perbedaan function-function tesebut dengan function tambah() hanya pada operasi z=x+y.

Misal pada script function kali():

function kali(){

    var hsl=document.getElementById("hasil");

    x=parseFloat(document.kalkulator.angka1.value);

    y=parseFloat(document.kalkulator.angka2.value);

    z=x*y;

    hsl.innerHTML=z;

}

Sebagai bonus tutorial, script HTML

<input type="reset" 

onclick="this.form.reset()" value="reset" /> berfungsi sebagai tombol untuk mereset form.