0

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"?

1 ответ 1

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>

5
  • спасибо, наверно я что-то не так объяснил, сумма должна быть в элементе span c классом/id total
    – 4isto
    23 июл 2021 в 13:54
  • Вам никто не говорил, что id элемента должен быть уникальным? Спасибо, учту, еще только учусь.
    – 4isto
    23 июл 2021 в 13:56
  • Неужто так сложно пару строчек поправить? Изменил ответ.
    – nazarpunk
    23 июл 2021 в 17:47
  • можете подсказать, сейчас если руками изменить количество в input, то при нажатии на блок число меняется на прежнее, как это исправить?
    – 4isto
    24 июл 2021 в 15:51
  • Так сложно ещё одно событие добавить? Исправил ответ.
    – nazarpunk
    24 июл 2021 в 16:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.