Multiple Button Counters

index.pug

- for (var x = 0; x < 13; x++)
  .qty-holder
    button.qty-dec -
    input(type="number" value="1").qty-adj
    button.qty-inc +

multiple-button-counters.markdown

Multiple Button Counters

Up and down counter that adjusts the ticks on quantity

A Pen by Vincent Tang on CodePen.

License.

script.js

// var qtyHolders = document.querySelectorAll(".qty-holder");
var qtyDecs = document.querySelectorAll(".qty-dec");
var qtyIncs = document.querySelectorAll(".qty-inc");

qtyDecs.forEach((qtyDec) => {
  qtyDec.addEventListener("click",function(e){
    if(e.target.nextElementSibling.value > 0){
      e.target.nextElementSibling.value--;
    } else {
      // delete the item, etc
    }
  })
})
qtyIncs.forEach((qtyDec) => {
  qtyDec.addEventListener("click",function(e){
    e.target.previousElementSibling.value++;
  })
})

style.scss

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

.qty-holder {
  display: flex;
  input {
    outline: none;
    width: 30px;
    text-align: center;
  }
  button {
    padding: 1px 7px;
    font-size: 20px;
    font-weight: bold;
  }
}

styles

<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" />