HTML/JS How to Adjust (Count Down) Product Quantity

Question

I have a simple html element that contains a number representing product quantity...

<h1>Product QTY</h1>
<div id=“prod-qty”>
  <div>
    <span class=“qty”>57</span>
    <div class="smalltext">Left In Stock</div>
  </div>  
</div>

How can I use JS to decrease that number by 1 every 15 seconds?
How can I use JS to decrease that number by 1-3 randomly every 15-30 seconds?

Replace all `“”` by `""`. You’re going to run into some issues otherwise. — Sebastian Simon, Jan 15 '17 at 23:23

score 0 · Answer 1 · answered Jan 14 '17 at 23:08

This should give you an starting point

var runEvery = 15 * 1000; //seconds;
window.setInterval(function(){
    var elem = $("#prod-qty .qty");
    var decrease = 1;
    var value = +elem.text() - decrease;
    if(value <= 0) {
      value = 0;
    }
    elem.text(value);
}, runEvery);

To generate random values for the decrement and the frequency of the execution check the reference.

score 0 · Accepted Answer · answered Jan 14 '17 at 23:26

This code should do what you want:

<h1>Product QTY</h1>
<div id=“prod-qty”>
  <div>
    <span class=“qty” id="qty"></span>
    <div class="smalltext">Left In Stock</div>
  </div>  
</div>

<script>
    var qty = 57
    var qtyId = document.getElementById("qty");

    setQty(qty);

    function setQty(qty)
    {
        qtyId.innerHTML = qty;

        if (qty==0) return;

        var parts = Math.floor((Math.random() * 3) + 1);
        if (parts > qty) parts = qty;

        var msec =  Math.floor(((Math.random() * 15) + 15)*1000);

        qty -= parts;

        setTimeout(function() {
            setQty(qty);
        }, msec)
    }
</script>

Every time when the function setQty is called, the quantity is updated, a randomley quantity (1-3) is for the next update subtracted and the call to setQty is started with a callBack-function in a randomely time (15-30 s).

HTML/JS How to Adjust (Count Down) Product Quantity

2 Answers2