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

Question

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

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;
  })
}

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

Answer 1

У вас не правильно определась переменная span
Туда попадало значение первого элемента на странице. Надо просто перенсти селектор и саму переменную в обработчик события клика

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) {
    // Создаем и выбираем из this(это элемент по которому кликнули)
    const span = this.querySelector('div>span');
    set.add(this.textContent);
    let arr = [...set];
    el1.textContent = arr.join(', ');

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

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

БЛОГ НА HUSL

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

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