Operasi Aritmetik Dengan Data Input Yang Bisa Diisi Oleh User Pada Halaman HTML

Oleh Nino Guevara Ruwano Juli 02, 2020 Posting Komentar

Niguru.com | Jumat, 3 Jul 2020 | Pada posting sebelumnya Niguru.com sudah menjelaskan mengenai cara pembuatan operasi penjumlahan sederhana pada Javascript. Maka pada posting kali ini Niguru.com akan memberikan contoh penjumlahan pada aplikasi yang berbeda.

Pada posting kali ini, Niguru.com juga akan menjelaskan cara membuat kolom input, sehingga user dapat mengisikan input yang sesuai dengan keperluannya. Dan hasil dari pengolahan data juga akan ditampilkan pada kolom yang lain (= kolom output).

Berikut ini contoh script untuk keperluan tersebut:

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

<input type="text" id="id2" name="in2" 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.write(jumlahkan)

}

</script>

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

Hasilnya bila dilihat pada browser:

User bisa mengisikan langsung nilai variabel pada 2 kolom yang tersedia:

Setelah tombol "Hasil" ditekan, maka hasilnya akan ditampilkan:

Note:
Meskipun contoh yang ditampilkan oleh Niguru.com hanya penjumlahan, namun hanya dengan mengganti operator (+) dengan operator lainnya, maka dengan cara yang serupa kamu bisa membuat sendiri operasi pengurangan, perkalian dan pembagian, dengan sama mudahnya.

Demikianlah penjelasan mengenai cara menampilkan input dan output dalam kolom, berikut cara untuk mengolah data di dalamnya.

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

Selamat beraktivitas .. Have a nice day :-)

www.Niguru.com (Nino Guevara Ruwano)