Cara menggunakan membuat kalkulator dengan javascript

Question

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

Table of Contents Show

Keterangan :
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 :

function hitung(pilihan)
1. hitung adalah nama method
2. pilihan adalah parameter yang digunakan dalam method hitung, proses perhitungan akan dilihat dari nilai parameternya
var bil1=document.getElementById(‘angka1’).value;Artinya, variabel bil1 bernilai sesuai dengan nilai (value) pada element yang memiliki id angka1
bil1 = parseInt(bil1)parseInt(bil1), artinya konversi nilai bil1 menjadi tipe integer
if (pilihan==’tambah’)artinya, jika nilai dari parameter pilihan adalah ‘tambah’
document.getElementById(‘hasil’).value = bil1 + bil2;Artinya, mengatur nilai dari element yang memiliki id ‘hasil’ dengan nilai dari (bil1 + bil2)
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

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

kode javascript