Operasi Aritmetik Pada Javascript Dengan Data Input Sekaligus Output Yang Ditampilkan Pada Kolom

Niguru.com | Sabtu, 4 Jul 2020 | Pada posting sebelumnya Niguru.com sudah menjelaskan mengenai cara pembuatan operasi penjumlahan sederhana pada Javascript, yang menyediakan fasilitas bagi user untuk mengisikan input langsung pada web page.

Pada posting kali ini Niguru.com akan melanjutkan pembahasan dengan masih pada topik yang serupa, namun dengan tambahan fasilitas untuk menampilkan output pada kolom yang sudah disediakan.

Berikut ini script untuk keperluan tersebut:

<input type="text" id="id1" name="in1" size="3">

<input type="text" id="id2" name="in2" size="3">

<input type="text" id="id3" name="out1" size="3">

<input type="button" value="Hasil" name="TblHasil" onclick="jumlahkan()">

<script language="javascript">

function jumlahkan()

{

var a=parseInt(document.getElementById("id1").value);

var b=parseInt(document.getElementById("id2").value);

jumlahkan=a+b

document.getElementById("id3").value=jumlahkan;

}

</script>

 

Simpan dengan nama InputJS02.html (boleh menggunakan nama lain):

 

Hasilnya:

 

Isi dengan nilai dan klik tombol Hasil:

 

Hasilnya:

 

Agar tampilan terlihat lebih bagus, Niguru.com menambahkan teks (+) dan (=) diantara kolom-kolom tersebut, sehingga script menjadi:

<input type="text" id="id1" name="in1" size="3">

 + 

<input type="text" id="id2" name="in2" size="3">

 = 

<input type="text" id="id3" name="out1" size="3">

<input type="button" value="Hasil" name="TblHasil" onclick="jumlahkan()">

<script language="javascript">

function jumlahkan()

{

var a=parseInt(document.getElementById("id1").value);

var b=parseInt(document.getElementById("id2").value);

jumlahkan=a+b

document.getElementById("id3").value=jumlahkan;

}

</script>

 

Simpan dengan nama yang berbeda dengan nama file sebelumnya, agar file sebelum ditambah tanda (+) dan (=) tetap ada, misalnya InputJS03 (boleh menggunakan nama lain):

 

 

Hasilnya:

 

Tampak setelah diisi:

 

Demikianlah penjelasan mengenai cara untuk membuat operasi penjumlahan, dimana user bisa mengetikkan input dan melihat output pada kolom yang disediakan.

Semoga penjelasan pada posting kali ini bisa menambah wawasan dan pengetahuan bagi para pembaca sekalian.

Selamat beraktivitas .. Have a nice day :-)

www.Niguru.com (Nino Guevara Ruwano)