Html - How can the count of product add/remove can be independent for each product?

Baljinder
August 28, 2024
154 views
0 votes
2 Answers

When the add/remove button is clicked it increases/decreases count of the product but that count value stays for other products too.

how to make the count independent for each product? so that when the product is added it shows its count only and other products to have their individual count

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

I Tried to create a count variable that stores the value of the product count added and removed.

Tags: html javascript

Answers

To make the count independent for each product, you need to store a separate count for each product instead of using a single count variable. Here’s how you can do it:

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

This solution creates a separate count variable for each product, that makes sure that the count is independent.

You can use the "data" attribute to make the count independent for each product by storing its individual count directly on the element. Try the below code:

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

note:
You are using the same alternate name for both the images,so change it. Just for your information.

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How can the count of product add/remove can be independent for each product?

Answers