Как реализовать выбор нескольких продуктов из блока (div) с помощью кликов мыши и отображение их общей стоимости в другом элементе (абзаце)?

Как можно изменить код, чтобы значение переменной "sum" соответствовало текстовому содержимому дива, на котором был сделан клик, а не только содержимому первого дива?
  • 14 августа 2024 г. 11:03
Ответы на вопрос 2
Для реализации выбора нескольких продуктов из блока и отображения общей стоимости можно использовать 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".
Вы получаете значение span один раз при запуске скрипта и туда попадает первый span первого div . 
Вам же нужно при клике брать span внутри кликнутого элемента:
div.addEventListener('click', function(e) {
    let span = this.querySelector('span');

    set.add(this.textContent); 
    let arr = [...set];
    el1.textContent = arr.join(', ');
    
    sum += +span.textContent;
    console.log(span.textContent);
    el2.textContent = sum;
})
Похожие вопросы