7+ Program Javascript Penjumlahan Otomatis

Yowatech.id – Javascript Penjumlahan Otomatis. Kemampuan dasar dalam pemrograman adalah kemampuan untuk melakukan operasi aritmatika, salah satunya adalah penjumlahan.

Pada artikel ini, kami akan membahas 7 program JavaScript penjumlahan otomatis lengkap beserta penjelasannya.

Program-program ini akan membantu pembaca untuk memahami cara-cara yang berbeda dalam melakukan penjumlahan pada aplikasi JavaScript.

Baca Juga: 7+ Contoh Program Menghitung Luas Persegi Panjang Javascript

Program-program yang kami bahas mulai dari yang paling sederhana menggunakan prompt hingga yang lebih kompleks dengan menggunakan array.

Selain itu, terdapat juga program yang menggunakan input field, multiple input field, form, checkbox, dan radio button.

Pembaca diharapkan dapat memahami keunggulan dan kelemahan masing-masing program dalam melakukan penjumlahan pada aplikasi JavaScript.

Contoh 1 Program Javascript Penjumlahan Otomatis

Program Sederhana dengan Prompt

Code:

var num1 = parseInt(prompt("Masukkan angka pertama: "));
var num2 = parseInt(prompt("Masukkan angka kedua: "));
var sum = num1 + num2;
alert("Hasil penjumlahan: " + sum);

Program sederhana ini menggunakan method prompt untuk mengambil input dari user. Kemudian, nilai yang diinputkan akan dijumlahkan dan hasilnya akan ditampilkan menggunakan method alert.

Contoh 2 Program Javascript Penjumlahan Otomatis

Program dengan Input Field dan Button, Javascript Penjumlahan Otomatis HTML + Javascript

Code Html:

<input type="text" id="num1">
<input type="text" id="num2">
<button onclick="add()">Tambahkan</button>
<div id="result"></div>

Code Javascript:

function add() {
  var num1 = parseInt(document.getElementById("num1").value);
  var num2 = parseInt(document.getElementById("num2").value);
  var sum = num1 + num2;
  document.getElementById("result").innerHTML = "Hasil penjumlahan: " + sum;
}

Pada program ini, kita akan menggunakan input field dan button untuk mengambil input dari user. Kemudian, nilai yang diinputkan akan dijumlahkan dan hasilnya akan ditampilkan pada sebuah element div.

Contoh 3 Program Javascript Penjumlahan Otomatis

Program dengan Multiple Input Field dan Button, Javascript Penjumlahan Otomatis HTML + Javascript.

Code Html:

<input type="text" class="num">
<input type="text" class="num">
<button onclick="add()">Tambahkan</button>
<div id="result"></div>

Code Javascript:

function add() {
  var nums = document.getElementsByClassName("num");
  var sum = 0;
  for (var i = 0; i < nums.length; i++) {
    sum += parseInt(nums[i].value);
  }
  document.getElementById("result").innerHTML = "Hasil penjumlahan: " + sum;
}

Pada program ini, kita akan menggunakan multiple input field dan button untuk mengambil input dari user. Kemudian, nilai yang diinputkan akan dijumlahkan dan hasilnya akan ditampilkan pada sebuah element div.

Contoh 4 Program Javascript Penjumlahan Otomatis

Program dengan Form dan Submit Button

Code Html:

<form onsubmit="return false">
  <input type="text" name="num1">
  <input type="text" name="num2">
  <input type="submit" onclick="add()" value="Tambahkan">
</form>
<div id="result"></div>

Code Javascript:

function add() {
  var num1 = parseInt(document.getElementsByName("num1")[0].value);
  var num2 = parseInt(document.getElementsByName("num2")[0].value);
  var sum = num1 + num2;
  document.getElementById("result").innerHTML = "Hasil penjumlahan: " + sum;
}

Pada program ini, kita akan menggunakan form dan submit button untuk mengambil input dari user. Kemudian, nilai yang diinputkan akan dijumlahkan dan hasilnya akan ditampilkan pada sebuah element div.

Contoh 5 Program Javascript Penjumlahan Otomatis

Program dengan Checkbox

Code Html:

<input type="checkbox" name="num1" value="2">2
<input type="checkbox" name="num2" value="4">4
<input type="checkbox" name="num3" value="6">6
<button onclick="add()">Tambahkan</button>
<div id="result"></div>

Code Javascript:

function add() {
var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
var sum = 0;
for (var i = 0; i < checkboxes.length; i++) {
sum += parseInt(checkboxes[i].value);
}
document.getElementById("result").innerHTML = "Hasil penjumlahan: " + sum;
}

Pada program ini, kita akan menggunakan checkbox untuk mengambil input dari user. Hanya nilai yang di-check yang akan dijumlahkan dan hasilnya akan ditampilkan pada sebuah element div.

Contoh 6 Program Javascript Penjumlahan Otomatis

Program dengan Radio Button

Code Html:

```html
<input type="radio" name="num" value="2">2
<input type="radio" name="num" value="4">4
<input type="radio" name="num" value="6">6
<button onclick="add()">Tambahkan</button>
<div id="result"></div>

Code Javascript:

function add() {
  var radios = document.getElementsByName("num");
  var sum = 0;
  for (var i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      sum += parseInt(radios[i].value);
    }
  }
  document.getElementById("result").innerHTML = "Hasil penjumlahan: " + sum;
}

Pada program ini, kita akan menggunakan radio button untuk mengambil input dari user. Hanya nilai yang di-selected yang akan dijumlahkan dan hasilnya akan ditampilkan pada sebuah element div.

Contoh 7 Program Javascript Penjumlahan Otomatis

Program dengan Array

Code HTML:

<input type="text" id="num" placeholder="Masukkan angka dipisahkan oleh koma">
<button onclick="add()">Tambahkan</button>
<div id="result"></div>

Code Javascritpt:

function add() {
  var nums = document.getElementById("num").value.split(",");
  var sum = 0;
  for (var i = 0; i < nums.length; i++) {
    sum += parseInt(nums[i]);
  }
  document.getElementById("result").innerHTML = "Hasil penjumlahan: " + sum;
}

Pada program ini, kita akan menggunakan array untuk mengambil input dari user. Kemudian, nilai dalam array akan dijumlahkan dan hasilnya akan ditampilkan pada sebuah element div.

Demikianlah 7 program JavaScript penjumlahan otomatis lengkap beserta penjelasannya. Dengan memahami contoh-contoh tersebut, pembaca dapat mengembangkan program-program yang lebih kompleks dan dapat memperluas pemahaman dalam pemrograman JavaScript.

Penutup, Program Javascript Penjumlahan Otomatis

Dalam mempelajari program-program tersebut, pembaca juga akan memperdalam pengetahuan dalam menggunakan beberapa fitur JavaScript, seperti prompt, input field, checkbox, radio button, dan array.

Selain itu, pembaca juga akan memahami cara-cara yang berbeda dalam mengambil input dari user dan menampilkan output pada aplikasi JavaScript.

Baca Juga: 7+ Contoh Membuat Program Kasir Dengan Javascript

Semoga artikel ini bermanfaat bagi pembaca yang ingin mempelajari cara-cara dalam melakukan penjumlahan pada aplikasi JavaScript.

Selalu ingat untuk terus belajar dan berlatih agar kemampuan dalam pemrograman semakin berkembang dan meningkat.