Для реализации выбора нескольких продуктов из блока и отображения общей стоимости можно использовать JavaScript.
Ниже приведен пример кода, который позволяет выбрать несколько продуктов из блоков (div) с помощью кликов мыши и отображает их общую стоимость в другом элементе (абзаце):
HTML:
```html
<div class="product" data-price="10">Product 1</div>
<div class="product" data-price="20">Product 2</div>
<div class="product" data-price="30">Product 3</div>
<p id="totalPrice">Total price: $0</p>
```
JavaScript:
```javascript
let totalPrice = 0;
document.querySelectorAll('.product').forEach(item => {
item.addEventListener('click', () => {
if (item.classList.contains('selected')) {
item.classList.remove('selected');
totalPrice -= parseInt(item.dataset.price);
} else {
item.classList.add('selected');
totalPrice += parseInt(item.dataset.price);
}
document.getElementById('totalPrice').textContent = `Total price: $${totalPrice}`;
});
});
```
Этот код добавляет обработчик клика ко всем элементам с классом "product". При клике он проверяет, выбран ли уже продукт (по наличию класса "selected"), и в зависимости от этого добавляет или удаляет его из общей стоимости.
Чтобы изменить код и обновить значение переменной "sum" на основе текстового содержимого divа, на котором был сделан клик, вы можете изменить следующую строку в коде JavaScript:
```javascript
totalPrice += parseInt(item.dataset.price);
```
замените на:
```javascript
totalPrice += parseInt(item.textContent.match(/\d+/)[0]);
```
Это извлечет число из текстового содержимого divа и добавит его к переменной "totalPrice".