Mencoba menggabungkan nilai angka dari beberapa div.

Terkadang jumlah div bisa 1 dan terkadang jumlah div bisa 500.

Mencoba menemukan cara untuk menggabungkan semua nilai angka menjadi output dari "total gabungan"

function addNums() {
    var sum = ('.item-price' + '.item-price');
}

document.getElementById('total').innerHTML = addNums;
<div class="item-price">$84</div>
<div class="item-price">$8</div>
<div class="item-price">$14</div>
<div class="item-price">$66</div>
<div class="item-price">$22</div>
<div class="item-price">$34</div>
<div class="item-price">$16</div>
<div class="item-price">$6</div>
<div class="item-price">$14</div>

<div class="item-total">Total:
  <span id="total" class="total" ></span>
</div>
2
Captain Steve 4 Juli 2021, 20:31

4 jawaban

Jawaban Terbaik

Anda dapat mengambil nomor dari tag dan menambahkan satu sama lain dengan pengurangan.

  • Array.from membuat larik normal dari larik DOM
  • Kemudian kami membawa semua teks ke dalam tag, menghapus tanda dolar dan menjadikannya nomor
  • Dan akhirnya, tambahkan bersama-sama dengan pengurangan.
const items = Array.from(document.getElementsByClassName("item-price")).map(item => +item.innerText.substr(1));

document.getElementById('total').innerHTML = items.reduce((a,b) => a + b);
<div class="item-price">$84</div>
<div class="item-price">$8</div>
<div class="item-price">$14</div>
<div class="item-price">$66</div>
<div class="item-price">$22</div>
<div class="item-price">$34</div>
<div class="item-price">$16</div>
<div class="item-price">$6</div>
<div class="item-price">$14</div>

<div class="item-total">Total:
  <span id="total" class="total" ></span>
</div>
2
Robert Hovhannisyan 4 Juli 2021, 17:42

Anda dapat mengubah kode JS Anda menjadi ini:

function addNums() {
    var sum = Array.from(document.querySelectorAll('.item-price')).reduce((cum,x) => {
     return cum + parseInt(x.innerText.slice(1));
    },0);
    return '$' + sum;
}

document.getElementById('total').innerHTML = addNums();
<div class="item-price">$84</div>
<div class="item-price">$8</div>
<div class="item-price">$14</div>
<div class="item-price">$66</div>
<div class="item-price">$22</div>
<div class="item-price">$34</div>
<div class="item-price">$16</div>
<div class="item-price">$6</div>
<div class="item-price">$14</div>

<div class="item-total">Total:
  <span id="total" class="total" ></span>
</div>
  1. Dapatkan semua .item-price div menggunakan querySelectorAll. Ini mengembalikan koleksi bukan larik, jadi Anda mengubah koleksi menjadi larik menggunakan Array.from()
  2. reduce digunakan untuk mengonversi array menjadi nilai gabungan tunggal setelah beberapa perhitungan pada setiap elemen array yang dimulai dengan nilai awal. Di sini kita mulai dengan nilai awal 0 dan menambahkan harga setiap item.
  3. slice() digunakan untuk mengiris array/string, kita menggunakan slice(1) untuk mendapatkan nilai harga dari indeks pertama (mengabaikan $). Itu akan menjadi string jadi kami mengonversi menggunakan parseInt().
  4. Kami mengembalikan nilainya.

Catatan: Cukup melakukan var x = addNums berarti x sekarang memegang fungsi tersebut. addNums() mengeksekusi fungsi dan melakukan var x = addNums() berarti x sekarang menyimpan nilai yang dikembalikan oleh addNums saat dieksekusi.

0
Tushar Shahi 4 Juli 2021, 17:54
function addNums() {
 let prices = document.getElementsByClassName('item-price');
 let sum = 0;
 for(let  i = 0; i < prices.length;i++){
     let p = prices[i].innerText
     p = p.substring(1)
     sum = sum+parseInt(p)
  }
  
  document.getElementById('total').innerHTML = sum;
    
}

addNums();
<div class="item-price">$84</div>
<div class="item-price">$8</div>
<div class="item-price">$14</div>
<div class="item-price">$66</div>
<div class="item-price">$22</div>
<div class="item-price">$34</div>
<div class="item-price">$16</div>
<div class="item-price">$6</div>
<div class="item-price">$14</div>

<div class="item-total">Total:
  <span id="total" class="total" ></span>
</div>
0
DCR 4 Juli 2021, 17:45

Simpan harga dalam variabel (total). Pilih semua harga dengan document.querySelectorAll('.item-price'), ulangi setiap harga dengan forEach dan urai harga dengan parseInt(element.innerHTML.substring(1), lalu tambahkan ini ke total.

function addNums() {
  var total = 0;
  document.querySelectorAll('.item-price').forEach(e => total += parseInt(e.innerHTML.substring(1)));
  return total;
}

document.getElementById('total').innerHTML = addNums();
<div class="item-price">$84</div>
<div class="item-price">$8</div>
<div class="item-price">$14</div>
<div class="item-price">$66</div>
<div class="item-price">$22</div>
<div class="item-price">$34</div>
<div class="item-price">$16</div>
<div class="item-price">$6</div>
<div class="item-price">$14</div>

<div class="item-total">Total:
  <span id="total" class="total"></span>
</div>
0
Spectric 4 Juli 2021, 17:44