Необходимо сделать так, чтобы кликами можно было выбрать несколько продуктов из div и их суммарная стоимость при этом писалась бы в абзац?

Question

[Артур Алекс]

index.html

<p id="el"></p>
<p id="el1"></p>
<p id="el2"></p>

script.js

let el = document.querySelector("#el");
let el1 = document.querySelector("#el1");
let el2 = document.querySelector("#el2");

let arr = [
    {name: 'milk', price: 23.00},
    {name: 'ice_cream', price: 70.00},
    {name: 'cottege', price: 85.00}
];

let sum = 0;
let set = new Set;
for (let obj of arr) {
    let div = document.createElement('div');
    div.innerHTML = `${obj.name}: <span>${obj.price}</span>`;
        
    el.appendChild(div);
}
let divs = document.querySelectorAll('div');
let span = document.querySelector('div>span');
for (let div of divs) {
    div.addEventListener('click', function(e) {
        set.add(this.textContent); 
        let arr = [...set];
        el1.textContent = arr.join(', ');

        sum += +span.textContent;
        console.log(span.textContent);
        el2.textContent = sum;
    })
}

В значение sum каждый раз попадает span.textContent только первого дива, а необходимо значение дива на котором был клик. Что необходимо подправить?

Answer 1

[Алексей Уколов]

Вы получаете значение 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;
})