6+ Contoh Menghitung Total dan Subtotal Pada Javascript

oleh

Yowatech.id – Menghitung Total dan Subtotal Pada Javascript. Selamat datang di blog saya! Pada kesempatan kali ini, saya akan membagikan contoh menghitung total dan subtotal pada Javascript.

Sebagai seorang developer, Anda pasti seringkali memerlukan perhitungan matematika pada project yang sedang Anda kerjakan. Salah satu perhitungan yang mungkin perlu Anda lakukan adalah menghitung total dan subtotal.

Total adalah jumlah dari semua nilai yang terlibat dalam suatu perhitungan, sementara subtotal adalah total dari sekelompok nilai yang terpisah.

Baca Juga: 8+ Contoh Program Perhitungan Javascript

Untuk menghitung total dan subtotal pada JavaScript, Anda dapat menggunakan variabel untuk menyimpan nilai-nilai dan kemudian melakukan perhitungan matematika pada nilai-nilai tersebut. Berikut adalah contoh kode JavaScript sederhana untuk menghitung total dan subtotal:

// Daftar item dan harga
var items = [
  {name: "Item 1", price: 10},
  {name: "Item 2", price: 20},
  {name: "Item 3", price: 30}
];

// Menghitung subtotal
var subtotal = 0;
for (var i = 0; i < items.length; i++) {
  subtotal += items[i].price;
}

// Menghitung total dengan pajak 10%
var tax = subtotal * 0.1;
var total = subtotal + tax;

// Menampilkan hasil
console.log("Subtotal: " + subtotal);
console.log("Tax: " + tax);
console.log("Total: " + total);

Output:

Menghitung Total dan Subtotal Pada Javascript
Menghitung Total dan Subtotal Pada Javascript

Penjelasan:

  • Pertama, kita membuat sebuah variabel items yang berisi daftar item dan harga.
  • Kemudian, kita membuat sebuah variabel subtotal dengan nilai awal 0, yang akan digunakan untuk menyimpan total harga dari semua item.
  • Selanjutnya, kita menggunakan loop for untuk menambahkan harga dari setiap item ke variabel subtotal.
  • Setelah subtotal terhitung, kita menghitung pajak dengan mengalikan subtotal dengan 0.1 (10%).
  • Terakhir, kita menghitung total dengan menambahkan subtotal dan tax.
  • Hasil dari perhitungan kemudian ditampilkan dengan menggunakan console.log().

Contoh 1 Menghitung Total dan Subtotal Pada Javascript

Menghitung Subtotal dan Total Dari Array

Code:

const items = [
  {name: "Item 1", price: 10},
  {name: "Item 2", price: 20},
  {name: "Item 3", price: 30},
  {name: "Item 4", price: 40},
  {name: "Item 5", price: 50}
];

const subtotal = items.reduce((acc, cur) => acc + cur.price, 0);
const tax = subtotal * 0.1;
const total = subtotal + tax;

console.log(`Subtotal: ${subtotal}, Tax: ${tax}, Total: ${total}`);

Penjelasan: Pada contoh ini, kita menggunakan metode reduce() pada array items untuk menghitung subtotal dengan menjumlahkan harga setiap item menggunakan arrow function.

Kemudian kita menghitung pajak dengan mengalikan subtotal dengan 0.1 dan total dengan menambahkan subtotal dengan pajak. Hasil perhitungan kemudian ditampilkan di konsol.

Contoh 2 Menghitung Total dan Subtotal Pada Javascript

Menghitung Subtotal dan Total Dari Array dengan Menggunakan Function

Code:

function calculateTotal(items) {
  const subtotal = items.reduce((acc, cur) => acc + cur.price, 0);
  const tax = subtotal * 0.1;
  const total = subtotal + tax;
  return {subtotal, tax, total};
}

const items = [
  {name: "Item 1", price: 10},
  {name: "Item 2", price: 20},
  {name: "Item 3", price: 30},
  {name: "Item 4", price: 40},
  {name: "Item 5", price: 50}
];

const {subtotal, tax, total} = calculateTotal(items);

console.log(`Subtotal: ${subtotal}, Tax: ${tax}, Total: ${total}`);

Penjelasan: Pada contoh ini, kita membuat sebuah function calculateTotal yang menerima parameter items. Function ini menghitung subtotal, pajak, dan total dengan menggunakan metode reduce() pada array items. Kemudian, function ini mengembalikan sebuah object yang berisi subtotal, pajak, dan total.

Kita memanggil function calculateTotal dengan parameter items dan menyimpan hasilnya di variabel subtotal, tax, dan total. Hasil perhitungan kemudian ditampilkan di konsol.

Contoh 3 Menghitung Total dan Subtotal Pada Javascript

Menghitung Subtotal dan Total Dari Object

Code:

const items = {
  item1: {name: "Item 1", price: 10},
  item2: {name: "Item 2", price: 20},
  item3: {name: "Item 3", price: 30},
  item4: {name: "Item 4", price: 40},
  item5: {name: "Item 5", price: 50}
};

const subtotal = Object.values(items).reduce((acc, cur) => acc + cur.price, 0);
const tax = subtotal * 0.1;
const total = subtotal + tax;

console.log(`Subtotal: ${subtotal}, Tax: ${tax}, Total: ${total}`);

Penjelasan:
Pada contoh ini, kita menggunakan metode Object.values() pada object items untuk mengambil nilai dari setiap properti dan menyimpannya dalam bentuk array. Kemudian, kita menggunakan metode reduce() pada array tersebut untuk menghitung subtotal dengan menjumlahkan harga setiap item menggunakan arrow function.

Kemudian kita menghitung pajak dengan mengalikan subtotal dengan 0.1 dan total dengan menambahkan subtotal dengan pajak. Hasil perhitungan kemudian ditampilkan di konsol.

Contoh 4 Menghitung Total dan Subtotal Pada Javascript

Menghitung Subtotal dan Total Dari Object dengan Menggunakan Function

Code:

function calculateTotal(items) {
  const subtotal = Object.values(items).reduce((acc, cur) => acc + cur.price, 0);
  const tax = subtotal * 0.1;
  const total = subtotal + tax;
  return {subtotal, tax, total};
}

const items = {
  item1: {name: "Item 1", price: 10},
  item2: {name: "Item 2", price: 20},
  item3: {name: "Item 3", price: 30},
  item4: {name: "Item 4", price: 40},
  item5: {name: "Item 5", price: 50}
};

const {subtotal, tax, total} = calculateTotal(items);

console.log(`Subtotal: ${subtotal}, Tax: ${tax}, Total: ${total}`);

Penjelasan: Pada contoh ini, kita membuat sebuah function calculateTotal yang menerima parameter items. Function ini menghitung subtotal, pajak, dan total dengan menggunakan metode Object.values() pada object items untuk mengambil nilai dari setiap properti dan menggunakan metode reduce() pada array tersebut untuk menghitung subtotal dengan menjumlahkan harga setiap item menggunakan arrow function.

Kemudian, function ini mengembalikan sebuah object yang berisi subtotal, pajak, dan total. Kita memanggil function calculateTotal dengan parameter items dan menyimpan hasilnya di variabel subtotal, tax, dan total. Hasil perhitungan kemudian ditampilkan di konsol.

Contoh 5 Menghitung Total dan Subtotal Pada Javascript

Menghitung Subtotal dan Total Dari DOM Element

Code:

const items = document.querySelectorAll(".item");
const prices = Array.from(items).map(item => Number(item.dataset.price));
const subtotal = prices.reduce((acc, cur) => acc + cur, 0);
const tax = subtotal * 0.1;
const total = subtotal + tax;

console.log(`Subtotal: ${subtotal}, Tax: ${tax}, Total: ${total}`);

Penjelasan:

Pada contoh ini, kita menggunakan metode document.querySelectorAll() untuk mencari semua elemen HTML yang mempunyai kelas “item”. Kemudian, kita menggunakan metode Array.from() untuk mengubah NodeList hasil dari querySelectorAll() menjadi array, dan menggunakan metode map() untuk mengambil nilai dari atribut data-price dari setiap elemen dan mengubahnya menjadi number menggunakan fungsi Number().

Kemudian, kita menggunakan metode reduce() pada array prices untuk menghitung subtotal dengan menjumlahkan harga setiap item menggunakan arrow function. Kemudian kita menghitung pajak dengan mengalikan subtotal dengan 0.1 dan total dengan menambahkan subtotal dengan pajak. Hasil perhitungan kemudian ditampilkan di konsol.

Contoh 6 Menghitung Total dan Subtotal Pada Javascript

Menghitung Subtotal dan Total Dari Tabel HTML

Code:

const table = document.querySelector("#items-table");
const rows = Array.from(table.querySelectorAll("tbody tr"));
const subtotal = rows.reduce((acc, row) => {
  const price = Number(row.querySelector
(".price").textContent);
return acc + price;
}, 0);
const tax = subtotal * 0.1;
const total = subtotal + tax;

console.log(Subtotal: ${subtotal}, Tax: ${tax}, Total: ${total});

Penjelasan:
Pada contoh ini, kita menggunakan metode document.querySelector() untuk mencari elemen HTML yang memiliki ID “items-table”. Kemudian, kita menggunakan metode querySelectorAll() pada elemen tersebut untuk mencari semua elemen <tr> di dalam <tbody>. Kemudian, kita menggunakan metode Array.from() untuk mengubah NodeList hasil dari querySelectorAll() menjadi array, dan menggunakan metode reduce() pada array rows untuk menghitung subtotal dengan menjumlahkan harga setiap item menggunakan arrow function. Pada arrow function, kita menggunakan metode querySelector() pada elemen row untuk mencari elemen dengan kelas “price” dan menggunakan fungsi Number() untuk mengubah teks harga menjadi number. Kemudian kita menghitung pajak dengan mengalikan subtotal dengan 0.1 dan total dengan menambahkan subtotal dengan pajak. Hasil perhitungan kemudian ditampilkan di konsol.

Contoh 7 Menghitung Total dan Subtotal Pada Javascript

Menghitung Subtotal dan Total Dari Input Form

Code:

const inputs = document.querySelectorAll("input[name='price']");
const prices = Array.from(inputs).map(input => Number(input.value));
const subtotal = prices.reduce((acc, cur) => acc + cur, 0);
const tax = subtotal * 0.1;
const total = subtotal + tax;

console.log(Subtotal: ${subtotal}, Tax: ${tax}, Total: ${total});

Penjelasan:

Pada contoh ini, kita menggunakan metode document.querySelectorAll() untuk mencari semua elemen HTML yang memiliki atribut name dengan nilai “price”. Kemudian, kita menggunakan metode Array.from() untuk mengubah NodeList hasil dari querySelectorAll() menjadi array, dan menggunakan metode map() untuk mengambil nilai dari atribut value dari setiap elemen input dan mengubahnya menjadi number menggunakan fungsi Number().

Kemudian, kita menggunakan metode reduce() pada array prices untuk menghitung subtotal dengan menjumlahkan harga setiap item menggunakan arrow function. Kemudian kita menghitung pajak dengan mengalikan subtotal dengan 0.1 dan total dengan menambahkan subtotal dengan pajak. Hasil perhitungan kemudian ditampilkan di konsol.

Penutup, Bagaimana Menghitung Total dan Subtotal Pada Javascript?

Itulah beberapa contoh sederhana tentang cara menghitung total dan subtotal pada Javascript. Semoga informasi yang telah saya bagikan dapat membantu Anda dalam pengembangan website atau aplikasi yang memerlukan perhitungan matematika. Dalam membangun sebuah aplikasi atau website, tidak hanya aspek visual saja yang perlu diperhatikan, namun juga aspek fungsionalitasnya.

Kemampuan untuk melakukan perhitungan matematika adalah salah satu aspek fungsionalitas yang sangat penting. Dengan menguasai konsep dan teknik untuk menghitung total dan subtotal pada Javascript, Anda akan dapat membuat aplikasi yang lebih baik dan lebih interaktif bagi pengguna.

Terakhir, jangan lupa untuk terus belajar dan mengembangkan diri sebagai seorang developer. Dunia teknologi terus berkembang dengan pesat, sehingga Anda harus selalu beradaptasi dan belajar hal baru agar tetap relevan dalam industri ini. Terima kasih telah membaca blog saya, semoga bermanfaat!

Baca Juga: 7+ Contoh Program Javascript Penjualan

Google News
Related Posts: