Summation for per clicks for every single product

Question

My basket object doesn't work properly. I want to sum increment button clicks for every single product stock requests and store them in localStorage (after that I am planning to decrease the stock quantity from the total for limiting new requests and removing product card if there are no more stocks left).

I tried to assign different keys to doing right summation for every single product by using localStorage.

UPDATED WORKING VERSION!

HTML:

<div id="stock-1">1</div>
<button onclick="basket.increaseStockQtyForProductUntilMaxRange({id:1, max:10}).setRequestedStockCountForProduct(1)">+</button><button onclick="basket.decreaseForProduct(1)">-</button><button onclick="basket.addProductRequestToBasket(1).setNewMaxIncrementForProduct(1).resetCounterForProduct(1)">add</button>

<div id="stock-2">1</div>
<button onclick="basket.increaseStockQtyForProductUntilMaxRange({id:2, max:10}).setRequestedStockCountForProduct(2)">+</button><button onclick="basket.decreaseForProduct(1)">-</button><button onclick="basket.addProductRequestToBasket(2).setNewMaxIncrementForProduct(2).resetCounterForProduct(2)">add</button>

<div id="stock-3">1</div>
<button onclick="basket.increaseStockQtyForProductUntilMaxRange({id:3, max:10}).setRequestedStockCountForProduct(3)">+</button><button onclick="basket.decreaseForProduct(3)">-</button><button onclick="basket.addProductRequestToBasket(3).setNewMaxIncrementForProduct(3).resetCounterForProduct(3)">add</button>
<hr> 

VanillaJS:

/**
 * A simple e-commerce basket snippet based on builder design pattern
 */
function Basket() {
   this.requestedStockQtyForProduct = {};
   this.remainingMaxRequestForProductStockQty = {};
}

Basket.prototype = {
  /**
   * @param {Integer} id  Holds div id data
   */
  stockCountOfProduct(id) {
    return document.getElementById('stock-' + id);
  },
  /**
   * @param {Object} data Holds product id and maximum range for increasing button
   */
  increaseStockQtyForProductUntilMaxRange(data) {
    var stockCount = this.stockCountOfProduct(data.id);

    if (! this.remainingMaxRequestForProductStockQty.hasOwnProperty(data.id)){
       this.remainingMaxRequestForProductStockQty[data.id] = data.max;
    }

    if (stockCount.innerHTML < this.remainingMaxRequestForProductStockQty[data.id]) {
         stockCount.innerHTML = parseInt(stockCount.innerHTML) + 1;
    } 

    return this;
  },
  /**
   * @param {Integer} id  Holds div id data
   */
  decreaseForProduct(id) {
    var stockCount = this.stockCountOfProduct(id);

    if (stockCount.innerHTML > 1) {
         stockCount.innerHTML = parseInt(stockCount.innerHTML) - 1;
    } 
  },

  /**
   * @param {Integer} id  Holds div id data
   */
  setRequestedStockCountForProduct(id) {
    var stockCount = this.stockCountOfProduct(id);

    if (! this.requestedStockQtyForProduct.hasOwnProperty(id)){
      this.requestedStockQtyForProduct[id] = [];
    }

    this.requestedStockQtyForProduct[id] = parseInt(stockCount.innerHTML);
    window.localStorage.setItem(id, this.requestedStockQtyForProduct[id]);

    return this;
  },
  /**
   * @param {Integer} id  Holds div id data
   */
  getRequestedStockCountForProduct(id) {
    return window.localStorage.getItem(id);
  },

  /**
   * @param {Integer} id  Holds div id data
   */
  setNewMaxIncrementForProduct(id) {
    if (! this.remainingMaxRequestForProductStockQty.hasOwnProperty(id)){
      this.remainingMaxRequestForProductStockQty[id] = [];
    }

    var totalRequested = this.getRequestedStockCountForProduct(id);
    this.remainingMaxRequestForProductStockQty[id] -= totalRequested;
    alert(this.remainingMaxRequestForProductStockQty[id]);

    return this;
  },
  /**
   * @param {Integer} id  Holds div id data
   */
  resetCounterForProduct(id) {
    var elem = document.getElementById('stock-' + id);  

    if (this.remainingMaxRequestForProductStockQty[id] == 0) {
      elem.innerHTML = 0;
    } else {
      elem.innerHTML = 1;
    }

    return this;
  },
  /**
   * @param {Integer} id  Holds div id data
   */
  addProductRequestToBasket(id) {

    // AJAX stuff goes here
    return this;
  },

};


basket = new Basket();

Here is the JsFiddle link for current code:

https://jsfiddle.net/bgul/85k4ovxm/295/

I expect the output of different summation for every single product but I got the sum of all product stock requests I performed.

Answer 1

The totals can be stored in an object using the product id as key. This way the totals don't get mixed up. Checkout the updated example below:

function Basket() {

   this.requestedStockQtyByProduct = {};
}

Basket.prototype = {

    incrementForProductId(id) {

    var elem = document.getElementById('stock-' + id);
    elem.innerHTML = parseInt(elem.innerHTML) + 1;

    if(!this.requestedStockQtyByProduct.hasOwnProperty(id)){
      this.requestedStockQtyByProduct[id] = [];
    }
    this.requestedStockQtyByProduct[id].push(parseInt(elem.innerHTML));


    var result = this.requestedStockQtyByProduct[id].reduce(function (prevItem, currentItem) {
        return prevItem + currentItem;
    }, 0)

    window.localStorage.setItem(id, result);

    },
  cleanTotalStockQtyForThisProduct(id) {
    window.localStorage.remove(id);
    var elem = document.getElementById('stock-' + id);
    elem.innerHTML = 0;
  },
  getTotalStockRequestForId(id) {
    alert(window.localStorage.getItem(id));
  },

};


basket = new Basket();

Checkout the jsfiddle: https://jsfiddle.net/maartendev/zbp3sg67/4/