Сложить все числа в созданных объектах

Question

const $tt = document.querySelector(`.tt`);

addEventListener(`click`, e => {

  const $target = e.target.closest(`[data-id]`);
  const $price  = $target.querySelector('#tar_price').innerHTML;
  
  if (!$target) return;
    const $id = document.getElementById(`id-${$target.dataset.id}`);
  
  if ($id){
    $id.querySelector(`input`).value = $id.dataset.count = +$id.dataset.count + 1;
    $id.querySelector(`#obj_price`).innerHTML = ($id.dataset.count = +$id.dataset.count) * $price;
  
  }else {
    $tt.insertAdjacentHTML(`beforeend`,
                          `<div class="count" id="id-${$target.dataset.id}" data-count="1">
                            <input type="text" value="1">
                            <span class="obj_price" id="obj_price">${$price}</span>
                           </div>`
    );
  }

})

.clickers-parent {
  display: flex;
  width: 100px;
}

.clicker,
.count {
  width: 50%;
  margin: 0 10px;
  border: 1px solid #b7b7b7;
  border-radius: 5px;
  text-align: center;
  padding: 5px 36px;
  background: #e2e2e2;
  cursor: pointer;
  transition: 0.2s;
  user-select: none;
}

.clicker:hover {
  background: #d6d6d6;
}

<div class="clickers-parent">
  <div class="clicker" data-action="add-info" data-id="1">
    <div class="card">
      <div class="card-body">
        <div class="media">
          <div class="media-body">
            <div class="prod_id" id="1">push me</div>
            <div class="tar_price" id="tar_price">5</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="clicker" data-action="add-info" data-id="2">
    <div class="card">
      <div class="card-body">
        <div class="media">
          <div class="media-body">
            <div class="prod_id" id="2">and me</div>
            <div class="tar_price" id="tar_price">10</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="tt">

<span>Сумма: </span><span id="total" class="total"></span>
</div>

Подскажите, как получить сумму чисел в span class/id total из полей span class/id obj_price которые получаются в результате нажатия на блоки "push me" и "and me"?

Answer 1

const $tt = document.querySelector(`.tt`),
  $count = document.getElementsByClassName(`count`),
  $total = document.getElementsByClassName(`total`);

const recalc = () => {
  let sum = 0;
  for (const $c of $count) sum += +$c.dataset.count * +$c.dataset.price;
  for (const $t of $total) $t.innerHTML = sum;
}


addEventListener(`click`, e => {
  const $target = e.target.closest(`[data-id]`);
  if (!$target) return;
  const $id = document.getElementById(`id-${$target.dataset.id}`);

  if ($id) {
    $id.querySelector(`input`).value = $id.dataset.count = +$id.dataset.count + 1;
  } else {
    $tt.insertAdjacentHTML(`beforeend`,
      `<div class="count" id="id-${$target.dataset.id}" data-count="1" data-price="${$target.dataset.price}">
                            <input type="number" min="0" value="1" class="count-input">
                           </div>`
    );
  }

  recalc();
})


addEventListener(`change`, e => {
  if (!e.target.classList.contains(`count-input`)) return;
  const val = +e.target.value;
  if (isNaN(val)) return;
  e.target.parentElement.dataset.count = val;
  recalc();
});

.clickers-parent {
  display: flex;
  width: 100px;
}

.clicker,
.count {
  width: 50%;
  margin: 0 10px;
  border: 1px solid #b7b7b7;
  border-radius: 5px;
  text-align: center;
  padding: 5px 36px;
  background: #e2e2e2;
  cursor: pointer;
  transition: 0.2s;
  user-select: none;
}

.clicker:hover {
  background: #d6d6d6;
}

<div class="clickers-parent">
  <div class="clicker" data-action="add-info" data-id="1" data-price="5">
    <div class="card">
      <div class="card-body">
        <div class="media">
          <div class="media-body">
            <div class="prod_id">push me</div>
            <div class="tar_price">5</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="clicker" data-action="add-info" data-id="2" data-price="10">
    <div class="card">
      <div class="card-body">
        <div class="media">
          <div class="media-body">
            <div class="prod_id">and me</div>
            <div class="tar_price">10</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="tt">
  Сумма: <span class="total">0</span>
</div>

БЛОГ НА HUSL

Сложить все числа в созданных объектах

Ответы (1 шт):