Contoh Program Javascript Kalkulator Sederhana

Berikut adalah contoh program Javascript kalkulator sederhana:

<!DOCTYPE html>
<html>
  <head>
    <title>Kalkulator Sederhana</title>
    <script>
      function hitung() {
        var angka1 = parseFloat(document.getElementById("angka1").value);
        var angka2 = parseFloat(document.getElementById("angka2").value);
        var operator = document.getElementById("operator").value;
        var hasil;

        if (operator == "tambah") {
          hasil = angka1 + angka2;
        } else if (operator == "kurang") {
          hasil = angka1 - angka2;
        } else if (operator == "kali") {
          hasil = angka1 * angka2;
        } else if (operator == "bagi") {
          hasil = angka1 / angka2;
        }

        document.getElementById("hasil").value = hasil;
      }
    </script>
  </head>
  <body>
    <h1>Kalkulator Sederhana</h1>
    <form>
      <label for="angka1">Angka 1:</label>
      <input type="number" id="angka1"><br>

      <label for="operator">Operator:</label>
      <select id="operator">
        <option value="tambah">+</option>
        <option value="kurang">-</option>
        <option value="kali">*</option>
        <option value="bagi">/</option>
      </select><br>

      <label for="angka2">Angka 2:</label>
      <input type="number" id="angka2"><br>

      <button type="button" onclick="hitung()">Hitung</button><br>

      <label for="hasil">Hasil:</label>
      <input type="text" id="hasil" readonly>
    </form>
  </body>
</html>

Penjelasan:

Pada baris ke-5 hingga 18, kita mendefinisikan fungsi hitung(). Fungsi ini akan dijalankan ketika tombol “Hitung” ditekan. Pada fungsi hitung(), kita mengambil nilai input angka 1, angka 2, dan operator yang dipilih dari elemen HTML menggunakan document.getElementById(). Kita juga menghitung hasil operasi sesuai operator yang dipilih dengan if-else statement. Terakhir, kita menampilkan hasil pada elemen HTML menggunakan document.getElementById().
Pada baris ke-21 hingga 33, kita mendefinisikan elemen HTML yang akan digunakan pada kalkulator sederhana. Kita menggunakan input untuk input angka 1, input angka 2, dan output hasil, dan menggunakan select untuk memilih operator.
Pada baris ke-30, kita menambahkan event listener onclick pada tombol “Hitung” untuk menjalankan fungsi hitung() ketika tombol tersebut ditekan.

Contoh program di atas hanya menggunakan operasi matematika dasar seperti penjumlahan, pengurangan, perkalian, dan pembagian. Anda dapat mengembangkan program ini dengan menambahkan operasi lain seperti pangkat, akar, atau trigonometri, atau juga dengan mengubah tampilan kalkulator sederhana ini agar lebih menarik dan user-friendly.

Tolong Bagikan: