Как выбрать несколько продуктов, чтобы в абзац писалась их общая стоимость

Question

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

Моего ума хватило пока только на это:

  
  let p = document.querySelector("p");
  let arr = [];
  let divs = document.querySelectorAll("div");
  for (const div of divs) {
    div.addEventListener("click", function () {
      if (div.click) arr.push(div.textContent);
      p.innerHTML = "Итого:" + arr ;
    });
  }

 
  <div>Яблоки: 200</div>
<div>Вишни: 300</div>
<div>Груши: 250</div>
<p></p>

Сразу укажу, что в тексте задания не пояснено в каком формате создавать и компоновать divы в html т.е можно как удобно и логично для Вас. Я сейчас пробую варианты с созданием объектов из div и получением из них цены. Есть еще несколько идей, но они ообще на стадии размышлений.

Answer 1

добавлю data-price, в html можно добавлять аттрибуты, так удобней будет брать цену через getAttribute

<div class="product" data-price="200">Яблоки: 200</div>

для общей суммы я могу использовать множество, оно не допускает повторяющихся элементов, что я проверяю при клике, выбран или нет элемент, дополнительно подстветив его цветом, но я оставлю эту часть закомментированной, чтобы было максимально просто

//todo если "вернул/передумал", предусмотреть, если ввел 0 к примеру, чтоб отнимать из итого(?)
//todo если захотел купить 100гр, добавить аттрибут data-unit="кг"...

let p = document.querySelector("p");
let total = 0; //итоговая сумма
let selectedDivs = new Set(); //множество, чтоб наши дивы хранить  

let divs = document.querySelectorAll(".product");
for (const div of divs) {
  div.addEventListener("click", function() {
    let price = parseInt(div.getAttribute('data-price')); //берем цену
    if (isNaN(price)) return; //если вдруг аттрибут пуст 

    //предусмотрим случай больше кг
    let quantity = parseInt(prompt("Введите количество:", 1)); //по умолчанию 1 поставлю
    if (isNaN(quantity) || quantity <= 0) return; //проверка
    let totalForProduct = price * quantity; //стоимость продукта за выбранное количество
    total += totalForProduct; //добавляем стоимость выбранного количества к итоговой сумме
    /* раскоментировать, чтоб использовать "массив/коллекцию Set"
    if (!selectedDivs.has(div)) {
      selectedDivs.add(div); //если продукт еще не был выбран, добавляем его в Set
      div.style.backgroundColor = "#d3f8d3"; //можно выделить цветом
    }
    */
    p.innerHTML = "Итого: " + total; //итого
  });
}

<div class="product" data-price="200">Яблоки: 200</div>
<div class="product" data-price="300">Вишни: 300</div>
<div class="product" data-price="250">Груши: 250</div>
<p>Итого: 0</p>

Answer 2

Я доделал свой вариант и получилось следующее:

   let p = document.querySelector("p");
  let arr = [];
  let arr2 = [];
  let divs = document.querySelectorAll("div");
  for (const div of divs) {
    div.addEventListener("click", function () {
      arr.push(Number(div.textContent.split(" ").slice(-1)));
      arr2.push(div.textContent.split(","));
      p.innerHTML = `
      Итого: <br/>
      <b>Выбранные Продукты</b>: ${arr2.reduce(
        (a, b) => a + ", " + b
      )} <br/> 
      <b>Чек</b> : ${arr.reduce((a, b) => a + b)} рублей`;
    });
  }

 <div>Яблоки: 200</div>
 <div>Вишни: 300</div>
 <div>Груши: 250</div>
 <p>Итого:</p>

Вроде бы все кривенько, но мне почему то нравится)

БЛОГ НА HUSL

Как выбрать несколько продуктов, чтобы в абзац писалась их общая стоимость

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