Как количество добавлений/удалений продуктов может быть независимым для каждого продукта?

При нажатии кнопки «Добавить/удалить» количество продуктов увеличивается/уменьшается, но это значение счетчика сохраняется и для других продуктов.

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

<!DOCTYPE html>
<html lang = "en">
  <head>
    <meta charset = "UTF-8" />
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel = "stylesheet" href = "style.css" />
  </head>
  <body>
    <div class = "header margin-bottom">
      <ul>
        <li><a href = "index.html">Home</a></li>
        <li><a href = "#">Full Web Projects</a></li>
        <li class = "dropdown">
          <a href = "javascript:void(0)" class = "dropbtn">Small Projects</a>
          <div class = "dropdown-content">
            <a href = "cart.html">cart</a>
            <a href = "counter.html">Counter</a>
            <a href = "products.html">Products</a>
            <a href = "#">Link 3</a>
          </div>
        </li>
      </ul>
    </div>
    <div class = "page">
      <h2>Product Page</h2>
      <p id = "message"></p>
      <div class = "products container">
        <div class = "product">
          <figure id = "caption">
            <img src = "images/flower.png" alt = "Flowers" />
            <figcaption id = "flower-caption">Beautiful Flower</figcaption>
          </figure>
          <div class = "productButtons">
            <button type = "button" class = "addProduct">Add To Cart</button>
            <button type = "button" class = "removeProduct">
              Remove From Cart
            </button>
          </div>
        </div>

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

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

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

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

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

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

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

    <script src = "product.js"></script>
  </body>
</html>

let count = 0;
document.querySelectorAll(".addProduct").forEach((btn) => {
  btn.addEventListener("click", () => {
    const productElement = btn.closest(".product");
    const proName = productElement.querySelector("figcaption").textContent;
    count++;
    if (count <= 10) {
      document.getElementById(
        "message"
      ).textContent = ` ${count} ${proName} Added.`;
    } else {
      count = 10;
      document.getElementById("message").textContent = ` Maximum limit reached`;
    }
  });
});

document.querySelectorAll(".removeProduct").forEach((btn) => {
  btn.addEventListener("click", () => {
    const productElement = btn.closest(".product");
    const proName = productElement.querySelector("figcaption").textContent;
    count--;
    if (count >= 0) {
      document.getElementById(
        "message"
      ).textContent = ` ${count}  ${proName} Remaining.`;
    } else {
      count = 0;
      document.getElementById("message").textContent = ` Minimum limit reached`;
    }
  });
});

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

ваш let count = 0; глобальный, поэтому между количеством и продуктом нет связи

— 28.08.2024 05:05

javascript html

28.08.2024 04:44

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

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

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

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

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

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

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

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

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

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

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

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

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

Ответы 2

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

Чтобы сделать счетчик независимым для каждого продукта, вам необходимо хранить отдельный счетчик для каждого продукта вместо использования одной переменной счетчика. Вот как вы можете это сделать:

document.querySelectorAll(".product").forEach((product) => {
  let count = 0;
  product.querySelector(".addProduct").addEventListener("click", () => {
    const proName = product.querySelector("figcaption").textContent;
    count++;
    if (count <= 10) {
      document.getElementById(
        "message"
      ).textContent = `${count} ${proName} Added.`;
    } else {
      count = 10;
      document.getElementById("message").textContent = `Maximum limit reached`;
    }
  });

  product.querySelector(".removeProduct").addEventListener("click", () => {
    const proName = product.querySelector("figcaption").textContent;
    count--;
    if (count >= 0) {
      document.getElementById(
        "message"
      ).textContent = `${count} ${proName} Remaining.`;
    } else {
      count = 0;
      document.getElementById("message").textContent = `Minimum limit reached`;
    }
  });
});

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

28.08.2024 05:10

Вы можете использовать атрибут data, чтобы сделать счетчик независимым для каждого продукта, сохраняя его индивидуальное количество непосредственно в элементе. Попробуйте приведенный ниже код:

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

    let count = productElement.getAttribute("data-count") || 0;
    count = parseInt(count);

    if (count < 10) {
      count++;
      productElement.setAttribute("data-count", count); 
      document.getElementById(
        "message"
      ).textContent = ` ${count} ${proName} Added.`;
    } else {
      document.getElementById("message").textContent = ` Maximum limit reached for ${proName}`;
    }
  });
});

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

    let count = productElement.getAttribute("data-count") || 0;
    count = parseInt(count);

    if (count > 0) {
      count--;
      productElement.setAttribute("data-count", count);
      document.getElementById(
        "message"
      ).textContent = ` ${count} ${proName} Remaining.`;
    } else {
      document.getElementById("message").textContent = ` Minimum limit reached for ${proName}`;
    }
  });
});

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

Большое спасибо.. Это тоже отлично работает. .

— 29.08.2024 03:18

28.08.2024 07:02