Показать стоимость продукта, выбранного при нажатии кнопки?

Как показать добавленный или удаленный продукт при нажатии кнопки «Добавить или удалить»?

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

как сделать его динамичным для каждого продукта?

document.querySelectorAll(".addProduct").forEach((btn) => {
  btn.addEventListener("click", ({target}) => {
    const proName = document.getElementById("flower-caption").textContent;

    document.getElementById("message").textContent = `${proName} Added.`;
  });
});
document.querySelectorAll(".removeProduct").forEach((btn) => {
  btn.addEventListener("click", ({target}) => {
    const proName = document.getElementById("flower-caption").textContent;

    document.getElementById("message").textContent = `${proName} Removed.`;
  });
});

<div class = "product">
  <figure id = "caption">
    <img src = "images/flower.png" alt = "Flowers" />
    <figcaption id = "flower-caption">Beautiful Flower</figcaption>
  </figure>
  <button type = "button" class = "addProduct">Add To Cart</button>
  <button type = "button" class = "removeProduct">Remove From Cart</button>
</div>

<div class = "product">
  <figure id = "caption">
    <img src = "images/parrot.png" alt = "Parrot" />
    <figcaption id = "parrot-caption">parrot</figcaption>
  </figure>
  <button type = "button" class = "addProduct">Add To Cart</button>
  <button type = "button" class = "removeProduct">Remove From Cart</button>
</div>

javascript html

26.08.2024 05:30

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Используйте parentNode, чтобы получить родителя нажатой кнопки, затем выберите текст figcaption.

id должен быть уникальным в html, вместо этого вы можете использовать класс.

<figure class = "caption">

document.querySelectorAll(".addProduct").forEach((btn) => {
  btn.addEventListener("click", ({
    target
  }) => {
    const proName = target.parentNode.querySelector("figcaption").textContent;
    document.getElementById("message").textContent = `${proName} Added.`;
  });
});
document.querySelectorAll(".removeProduct").forEach((btn) => {
  btn.addEventListener("click", ({
    target
  }) => {
    const proName = target.parentNode.querySelector("figcaption").textContent;
    document.getElementById("message").textContent = `${proName} Removed.`;
  });
});

<div class = "product">
  <figure class = "caption">
    <img src = "images/flower.png" alt = "Flowers" />
    <figcaption id = "flower-caption">Beautiful Flower</figcaption>
  </figure>
  <button type = "button" class = "addProduct">Add To Cart</button>
  <button type = "button" class = "removeProduct">Remove From Cart</button>
</div>

<div class = "product">
  <figure class = "caption">
    <img src = "images/parrot.png" alt = "Parrot" />
    <figcaption id = "parrot-caption">parrot</figcaption>
  </figure>
  <button type = "button" class = "addProduct">Add To Cart</button>
  <button type = "button" class = "removeProduct">Remove From Cart</button>
</div>
<div id = "message"></div>

26.08.2024 05:51

Более простой способ — использовать метод close().

Также вам не нужно использовать какой-либо идентификатор. просто используйте синтаксис CSS для метода .querySelector()...

И (это правда) идентификатор должен быть уникальным на веб-странице.

const msgElm = document.querySelector('#message');

document.querySelectorAll('.addProduct, .removeProduct').forEach( btn => 
  {
  btn.addEventListener('click', e => 
    {
    let opMov   = btn.matches('.addProduct') ? 'Added' : 'Removed';
    let proName = btn.closest('.product')
                  .querySelector('figcaption').textContent;                 
 
    msgElm.textContent = `${proName} ${opMov}.`;
  });
});

<div class = "product">
  <figure>
    <img src = "images/flower.png" alt = "Flowers" />
    <figcaption>Beautiful Flower</figcaption>
  </figure>
  <button type = "button" class = "addProduct"    > Add To Cart      </button>
  <button type = "button" class = "removeProduct" > Remove From Cart </button>
</div>

<div class = "product">
  <figure>
    <img src = "images/parrot.png" alt = "Parrot" />
    <figcaption>parrot</figcaption>
  </figure>
  <button type = "button" class = "addProduct"    > Add To Cart      </button>
  <button type = "button" class = "removeProduct" > Remove From Cart </button>
</div>
<br>
<div id = "message"></div>

26.08.2024 06:19

Ответ принят как подходящий

Чтобы ваш код работал для всех продуктов без написания отдельных функций, вы можете настроить обработчики событий так, чтобы они автоматически находили название продукта при нажатии кнопки.

Используйте уникальные идентификаторы. Каждый элемент HTML должен иметь уникальный идентификатор. Для повторяющихся элементов, например названий продуктов, используйте классы вместо идентификаторов.
Обновите прослушиватели событий: измените свой код так, чтобы при нажатии кнопки он искал ближайший контейнер продукта и извлекал оттуда название продукта. Таким образом, независимо от того, какую кнопку вы нажмете, код всегда найдет и отобразит правильное название продукта.

document.querySelectorAll(".addProduct").forEach((btn) => {
  btn.addEventListener("click", () => {
    const productElement = btn.closest(".product");
    const proName = productElement.querySelector("figcaption").textContent;
    document.getElementById("message").textContent = `${proName} Added.`;
  });
});

document.querySelectorAll(".removeProduct").forEach((btn) => {
  btn.addEventListener("click", () => {
    const productElement = btn.closest(".product");
    const proName = productElement.querySelector("figcaption").textContent;
    document.getElementById("message").textContent = `${proName} Removed.`;
  });
});

Спасибо огромное... Это сработало...

— 28.08.2024 01:08

26.08.2024 07:21