7+ Program Javascript Penjumlahan Otomatis

Selasa, 28 Maret 2023 - 13:28

facebook twitter whatsapp telegram line copy

URL berhasil dicopy

facebook icon twitter icon whatsapp icon telegram icon line icon copy

URL berhasil dicopy

Javascript Penjumlahan Otomatis

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.

advertser--

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

advertser--

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.

advertser--

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

advertser--

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.

Berita Terkait

Cara Menghack Akun Facebook Tanpa Menyentuh HP Target
Cara Membuat Program Biodata di Dev C
7+ Contoh Program C++ Game Sederhana
7+ Contoh Program C Biodata Mahasiswa
10+ Contoh Program C Perhitungan Matematika Sederhana
10+ Contoh Program C Tentang Kesehatan
10+ Contoh Program Java Menampilkan Nama
7+ Contoh Program Java Kalkulator

Berita Terkait

Senin, 30 Oktober 2023 - 16:12

Mengenal Barang Tenun Tebal untuk Melapis Ban: Solusi Terbaik untuk Kendaraan Anda

Senin, 30 Oktober 2023 - 16:11

Barang Murah untuk THR Lebaran: Temukan Penawaran Terbaik untuk Merayakan dengan Hemat

Senin, 30 Oktober 2023 - 16:08

Manfaat Memiliki Ayah yang Baik dalam Kehidupan Anda

Senin, 30 Oktober 2023 - 16:06

Mengungkapkan Bantuan Qatar untuk Pengembangan Pondok Pesantren di Indonesia

Senin, 30 Oktober 2023 - 16:03

Bantal Tidur Terbaik: Kunci Untuk Tidur Berkualitas

Senin, 30 Oktober 2023 - 15:59

Bangle untuk Ibu Hamil: Elegansi dan Kesehatan dalam Satu Genggaman

Senin, 30 Oktober 2023 - 15:56

Bando Mutiara untuk Hijab: Aksen Mewah untuk Penampilan Elegan

Senin, 30 Oktober 2023 - 15:54

Bando Bunga untuk Hijab: Sentuhan Kecantikan yang Memukau

Berita Terbaru