'How do I change only one variable into "p" tags?

How to change only one variable into multiple p tags? My code is not working.

At the beginning, the quantity of the first three products is equal to 10 and the quantity of the fourth product is 5. After pressing the button, the quantity of all products changes to 6. And it should be 11, 11, 11 and 6. The problem is surely in the part of the code responsible for update, i.e. updatedProductsList. I know why it doesn't work properly, but I don't know how to make it work. 

class Product {
  #count;
  constructor(name, count) {
    this.name = name;
    this.#count = count;
  }
  getCurrentCount() {
    return this.#count;
  }
  static add() {
    products.forEach((item) => {
      item.#count++;
      return updatedProductsList();
    });
  }
}

function getProduct(name) {
  productCount++;
  name = new Product(name, 10);
  products.push(name);
}

const printProductsList = () => {
  const productsContainer = document.querySelector("div");
  
  document.getElementById("products").innerHTML = `Number of products: ${products.length}`;
  
  products.map((item) => {
    const productElement = document.createElement("div");
    productElement.innerHTML = `<p>${
      item.name
    } <span>${item.getCurrentCount()}</span></p>`;
    productsContainer.append(productElement);
  });
};

const updatedProductsList = () => {
  products.map((item) => {
    document.querySelectorAll("span").forEach((e) => {
      e.innerText = `${item.getCurrentCount()}`;
    });
  });
};

const products = [];
let productCount = 0;
let apple = getProduct("Apple");
let orange = getProduct("Orange");
let avocado = getProduct("Avocado");

let watermelon = new Product ('Watermelon', 5)
products.push(watermelon)

printProductsList();
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
     :root {
      --bg-color: #ddd;
    }
    
    body {
      background-color: var(--bg-color);
      font-family: sans-serif;
    }
    
    div {
      margin-top: 3rem;
      margin-bottom: 3rem;
    }
    
    .product {
      background-color: #fff;
    }
  </style>
  <script defer src="script.js"></script>
</head>

<body>
  <div class="product">
    <h2 id='products'>
      `Number of products: ${products}
    </h2>
  </div>
  <button type="button" onclick="Product.add()">Increase the quantity by one</button>
</body>

</html>
javascripthtml


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions