Artikel ini merupakan potongan kode sederhana untuk membuat sebuah kalkulator dengan menggunakan Javascript. Pertama buat sebuah fungsi javascript untuk menghitung angka yang diinput. title=”hitung(this.value)”, artinya memanggil method hitung dengan nilai (value) dari element tersebut pada saat element tersebut di klik Keterangan :
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" title="hitung(this.value)"/>tamba>
<input name="hitung" type="radio" value="kurang" title="hitung(this.value)"/>kuran>
<input name="hitung" type="radio" value="kali" title="hitung(this.value)"/>kal>
<input name="hitung" type="radio" value="bagi" title="hitung(this.value)"/>bag>
<input name="hasil" type="text" value="0" id="hasil" />
</pre>Keterangan
<input name="hitung" type="radio" value="tambah" title="hitung(this.value)"/>tambah
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
Berandateknologi webMembuat Program Kalkulator Sederhana Dengan Javascript
JAVASCRIPT
Pada artikel ini saya akan membuat sebuah program kalkulator sederhana dengan bahasa pemrograman javascript. pada artikel sebelumnya saya telah membuat program copy text dengan bahasa pemrograman javascript kamu bisa di lihat di sini. program yang saya buat nanti bisa di modifikasi lagi oleh kamu yah dan sebagai referensi juga dalam belajar bahasa pemrograman javascript.
Kamu buat dengan file HTML nya dengan nama index.html
<!doctype html> <html lang="en"> <head> <title>Kalkulator Sederhana Javascript</title> </head> <body> <br> <br> <br> <!--Buat sebuah tombol --> <center> <form method="post" action=""> <!-- Buat label nilai 1--> <label for="nilai1">Nilai 1</label> <!-- Buat kolom masukkan --> <input type="text" id="nilai1" autocomplete="off"> <!-- Buat label nilai 2--> <label for="nilai2">Nilai 2</label> <!-- Buat kolom masukkan--> <input type="text" id="nilai2" autocomplete="off"> <!-- Buat spasi--> <br> <br> <br> <!-- Buat label hasil--> <label for="hasil">Hasil</label> <!-- Buat kolom masukkan untuk hasil--> <input type="text" id="hasil"> <!-- Buat spasi--> <br> <br> <br> <!-- Buat tombol--> <button type="button" id="tambah">+</button> <button type="button" id="kurang">-</button> <button type="button" id="kali">x</button> <button type="button" id="bagi">/</button> <button type="button" id="reset">reset</button> </form> </center> <script src="script.js"></script> </body> </html>Setelah itu buat file javascript nya dengan nama script.js
//buat variabel let nilai1 = document.getElementById('nilai1'); let nilai2 = document.getElementById('nilai2'); let tambah = document.getElementById('tambah'); let kurang = document.getElementById('kurang'); let kali = document.getElementById('kali'); let bagi = document.getElementById('bagi'); let hasil = document.getElementById('hasil'); let reset = document.getElementById('reset'); //ketika tombol tambah di klik tambah.addEventListener('click', function(){ //jalankan program untuk tambah tambah = parseInt(nilai1.value) + parseInt(nilai2.value); hasil.value = tambah; }); //ketika tombol kurang di klik kurang.addEventListener('click', function(){ //jalankan program untuk kurang kurang = parseInt(nilai1.value) - parseInt(nilai2.value); hasil.value = kurang; }); //ketika tombol kali di klik kali.addEventListener('click', function(){ //jalankan program untuk kali kali = parseInt(nilai1.value) * parseInt(nilai2.value); hasil.value = kali; }); //ketika tombol bagi di klik bagi.addEventListener('click', function(){ //jalankan program untuk bagi bagi = parseInt(nilai1.value) / parseInt(nilai2.value); hasil.value = bagi; }); //ketika tombol reset di klik reset.addEventListener('click', function(){ //jalankan program untuk reset hasil.value = ""; nilai1.value = ""; nilai2.value = ""; });Nah program yang saya buat di atas bisa di lihat di sini. semoga bermanfaat :D