How can I get this javascript to work more than once?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

-1

I am having trouble with the following javascript. The problem is with the "+" and "-" symbol. It works perfectly fine for the very first box on the left, but I cannot get it to work with the middle or very right box. I wand the middle and right box to function just like the first box to the left, so when I push "+" the quantity will increase and if I push "-" the quantity will decrease. Thanks!

function incrementQty() {

  var value = document.querySelector('input[name="qty"]').value;

  var cardQty = document.querySelector(".cart-qty");

  value = isNaN(value) ? 1 : value;

  value++;

  document.querySelector('input[name="qty"]').value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function decrementQty() {

  var value = document.querySelector('input[name="qty"]').value;

  var cardQty = document.querySelector(".cart-qty");

  value = isNaN(value) ? 1 : value;

  value > 1 ? value-- : value;

  document.querySelector('input[name="qty"]').value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function removeAnimation(e) {

  e.target.classList.remove("rotate-x");

}



const counter = document.querySelector(".cart-qty");

counter.addEventListener("animationend", removeAnimation);

$text-color: #2a2a2a;

$bg-color: #f2eee9;

*,

*:before,

*:after {

  box-sizing: border-box;

}



@mixin clearfix {

  content: '';

  display: table;

  clear: both;

}



body {

  font-family: 'Open Sans', sans-serif;

  color: $text-color;

  display: flex;

  height: 100vh;

  align-items: center;

  font-size: 14px;

  background: $bg-color;

  background-size: cover;

}



.container {

  position: relative;

  width: 100%;

  max-width: 280px;

  margin: 0 auto;

  &:after {

    @include clearfix;

  }

}



h1 {

  display: inline-block;

  background-color: $text-color;

  color: #fff;

  font-size: 20px;

  font-weight: normal;

  text-transform: uppercase;

  padding: 4px 20px;

  float: left;

}



.item {

  background-color: #fff;

  padding: 10px;

  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);

  border: 1px solid #FFFEFD;

  img {

    display: block;

    margin: auto;

    padding: 20px;

    width: 180px;

  }

  h2 {

    font-size: 1.1em;

    font-weight: normal;

    display: block;

    border-bottom: 1px solid #ccc;

    margin: 10px 0 10px 0;

    padding: 0 0 5px 0;

    em {

      display: block;

      line-height: 1.6;

      font-size: .8em;

    }

  }

}



.cart-button {

  float: right;

  margin: 12px 15px 0 0;

  img {

    width: 30px;

    height: 30px;

    margin: 0 auto;

    display: block;

    color: #888;

  }

  .cart-qty {

    background: #ff5252;

    border-radius: 50%;

    color: #fff;

    display: block;

    font-size: .8em;

    line-height: 17px;

    position: absolute;

    text-align: center;

    top: 11px;

    right: 10px;

    height: 17px;

    width: 17px;

  }

}



.qty-block {

  margin-top: 20px;

}



.qty {

  float: left;

  width: 80px;

  margin-right: 10px;

  user-select: none;

}



.increment,

.decrement {

  .qty_inc_dec & {

    float: left;

    text-align: center;

    width: 30px;

    cursor: pointer;

    font-size: 1.2em;

    line-height: 20px;

    height: 25px;

    vertical-align: middle;

    background-color: #fff;

    border: 1px solid #ccc;

  }

}



.increment {

  .qty_inc_dec & {

    border-bottom: 0;

    line-height: 25px;

  }

}



.qty_inc_dec {

  float: left;

  width: 10px;

  height: 50px;

  display: inline-block;

}



input[type="text"] {

  .qty & {

    float: left;

    font-family: "Open Sans", sans-serif;

    outline: 0;

    font-size: 1.2em;

    text-align: center;

    width: 50px;

    height: 50px;

    color: $text-color;

    line-height: 40px;

    border: 1px solid #ccc;

    border-right: 0;

  }

}



button[type="button"] {

  cursor: pointer;

  width: 168px;

  border: none;

  color: $text-color;

  background: #fff;

  height: 50px;

  font-size: 1.2em;

  font-family: 'Open Sans', sans-serif;

  transition: all .2s;

  border: 1px solid #ccc;

  box-shadow: 0 1px 2px #fff;

  &:hover {

    box-shadow: 0 1px 2px #cbc3ba;

  }

  &:active,

  &:focus {

    outline: none;

  }

}



.rotate-x {

  animation-duration: .6s;

  animation-name: rotate-x;

}



@keyframes rotate-x {

  from {

    transform: rotateY(0deg);

  }

  to {

    transform: rotateY(360deg);

  }

}

<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty()">+</i>

          <i class="decrement" onclick="decrementQty()">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty()">+</i>

          <i class="decrement" onclick="decrementQty()">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty()">+</i>

          <i class="decrement" onclick="decrementQty()">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>

asked Nov 29 '18 at 2:53

gofish1234

495

1

Please see How to create a minimal, complete and verifiable example. You have multiple elements with name="qty", the query document.querySelector('input[name="qty"]') always returns the first one in the document (if there is one).

– RobG
Nov 29 '18 at 2:58

add a comment |

-1

function incrementQty() {

  var value = document.querySelector('input[name="qty"]').value;

  var cardQty = document.querySelector(".cart-qty");

  value = isNaN(value) ? 1 : value;

  value++;

  document.querySelector('input[name="qty"]').value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function decrementQty() {

  var value = document.querySelector('input[name="qty"]').value;

  var cardQty = document.querySelector(".cart-qty");

  value = isNaN(value) ? 1 : value;

  value > 1 ? value-- : value;

  document.querySelector('input[name="qty"]').value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function removeAnimation(e) {

  e.target.classList.remove("rotate-x");

}



const counter = document.querySelector(".cart-qty");

counter.addEventListener("animationend", removeAnimation);

$text-color: #2a2a2a;

$bg-color: #f2eee9;

*,

*:before,

*:after {

  box-sizing: border-box;

}



@mixin clearfix {

  content: '';

  display: table;

  clear: both;

}



body {

  font-family: 'Open Sans', sans-serif;

  color: $text-color;

  display: flex;

  height: 100vh;

  align-items: center;

  font-size: 14px;

  background: $bg-color;

  background-size: cover;

}



.container {

  position: relative;

  width: 100%;

  max-width: 280px;

  margin: 0 auto;

  &:after {

    @include clearfix;

  }

}



h1 {

  display: inline-block;

  background-color: $text-color;

  color: #fff;

  font-size: 20px;

  font-weight: normal;

  text-transform: uppercase;

  padding: 4px 20px;

  float: left;

}



.item {

  background-color: #fff;

  padding: 10px;

  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);

  border: 1px solid #FFFEFD;

  img {

    display: block;

    margin: auto;

    padding: 20px;

    width: 180px;

  }

  h2 {

    font-size: 1.1em;

    font-weight: normal;

    display: block;

    border-bottom: 1px solid #ccc;

    margin: 10px 0 10px 0;

    padding: 0 0 5px 0;

    em {

      display: block;

      line-height: 1.6;

      font-size: .8em;

    }

  }

}



.cart-button {

  float: right;

  margin: 12px 15px 0 0;

  img {

    width: 30px;

    height: 30px;

    margin: 0 auto;

    display: block;

    color: #888;

  }

  .cart-qty {

    background: #ff5252;

    border-radius: 50%;

    color: #fff;

    display: block;

    font-size: .8em;

    line-height: 17px;

    position: absolute;

    text-align: center;

    top: 11px;

    right: 10px;

    height: 17px;

    width: 17px;

  }

}



.qty-block {

  margin-top: 20px;

}



.qty {

  float: left;

  width: 80px;

  margin-right: 10px;

  user-select: none;

}



.increment,

.decrement {

  .qty_inc_dec & {

    float: left;

    text-align: center;

    width: 30px;

    cursor: pointer;

    font-size: 1.2em;

    line-height: 20px;

    height: 25px;

    vertical-align: middle;

    background-color: #fff;

    border: 1px solid #ccc;

  }

}



.increment {

  .qty_inc_dec & {

    border-bottom: 0;

    line-height: 25px;

  }

}



.qty_inc_dec {

  float: left;

  width: 10px;

  height: 50px;

  display: inline-block;

}



input[type="text"] {

  .qty & {

    float: left;

    font-family: "Open Sans", sans-serif;

    outline: 0;

    font-size: 1.2em;

    text-align: center;

    width: 50px;

    height: 50px;

    color: $text-color;

    line-height: 40px;

    border: 1px solid #ccc;

    border-right: 0;

  }

}



button[type="button"] {

  cursor: pointer;

  width: 168px;

  border: none;

  color: $text-color;

  background: #fff;

  height: 50px;

  font-size: 1.2em;

  font-family: 'Open Sans', sans-serif;

  transition: all .2s;

  border: 1px solid #ccc;

  box-shadow: 0 1px 2px #fff;

  &:hover {

    box-shadow: 0 1px 2px #cbc3ba;

  }

  &:active,

  &:focus {

    outline: none;

  }

}



.rotate-x {

  animation-duration: .6s;

  animation-name: rotate-x;

}



@keyframes rotate-x {

  from {

    transform: rotateY(0deg);

  }

  to {

    transform: rotateY(360deg);

  }

}

<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty()">+</i>

          <i class="decrement" onclick="decrementQty()">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty()">+</i>

          <i class="decrement" onclick="decrementQty()">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty()">+</i>

          <i class="decrement" onclick="decrementQty()">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>

asked Nov 29 '18 at 2:53

gofish1234

495

1

Please see How to create a minimal, complete and verifiable example. You have multiple elements with name="qty", the query document.querySelector('input[name="qty"]') always returns the first one in the document (if there is one).

– RobG
Nov 29 '18 at 2:58

add a comment |

-1

function incrementQty() {

  var value = document.querySelector('input[name="qty"]').value;

  var cardQty = document.querySelector(".cart-qty");

  value = isNaN(value) ? 1 : value;

  value++;

  document.querySelector('input[name="qty"]').value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function decrementQty() {

  var value = document.querySelector('input[name="qty"]').value;

  var cardQty = document.querySelector(".cart-qty");

  value = isNaN(value) ? 1 : value;

  value > 1 ? value-- : value;

  document.querySelector('input[name="qty"]').value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function removeAnimation(e) {

  e.target.classList.remove("rotate-x");

}



const counter = document.querySelector(".cart-qty");

counter.addEventListener("animationend", removeAnimation);

$text-color: #2a2a2a;

$bg-color: #f2eee9;

*,

*:before,

*:after {

  box-sizing: border-box;

}



@mixin clearfix {

  content: '';

  display: table;

  clear: both;

}



body {

  font-family: 'Open Sans', sans-serif;

  color: $text-color;

  display: flex;

  height: 100vh;

  align-items: center;

  font-size: 14px;

  background: $bg-color;

  background-size: cover;

}



.container {

  position: relative;

  width: 100%;

  max-width: 280px;

  margin: 0 auto;

  &:after {

    @include clearfix;

  }

}



h1 {

  display: inline-block;

  background-color: $text-color;

  color: #fff;

  font-size: 20px;

  font-weight: normal;

  text-transform: uppercase;

  padding: 4px 20px;

  float: left;

}



.item {

  background-color: #fff;

  padding: 10px;

  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);

  border: 1px solid #FFFEFD;

  img {

    display: block;

    margin: auto;

    padding: 20px;

    width: 180px;

  }

  h2 {

    font-size: 1.1em;

    font-weight: normal;

    display: block;

    border-bottom: 1px solid #ccc;

    margin: 10px 0 10px 0;

    padding: 0 0 5px 0;

    em {

      display: block;

      line-height: 1.6;

      font-size: .8em;

    }

  }

}



.cart-button {

  float: right;

  margin: 12px 15px 0 0;

  img {

    width: 30px;

    height: 30px;

    margin: 0 auto;

    display: block;

    color: #888;

  }

  .cart-qty {

    background: #ff5252;

    border-radius: 50%;

    color: #fff;

    display: block;

    font-size: .8em;

    line-height: 17px;

    position: absolute;

    text-align: center;

    top: 11px;

    right: 10px;

    height: 17px;

    width: 17px;

  }

}



.qty-block {

  margin-top: 20px;

}



.qty {

  float: left;

  width: 80px;

  margin-right: 10px;

  user-select: none;

}



.increment,

.decrement {

  .qty_inc_dec & {

    float: left;

    text-align: center;

    width: 30px;

    cursor: pointer;

    font-size: 1.2em;

    line-height: 20px;

    height: 25px;

    vertical-align: middle;

    background-color: #fff;

    border: 1px solid #ccc;

  }

}



.increment {

  .qty_inc_dec & {

    border-bottom: 0;

    line-height: 25px;

  }

}



.qty_inc_dec {

  float: left;

  width: 10px;

  height: 50px;

  display: inline-block;

}



input[type="text"] {

  .qty & {

    float: left;

    font-family: "Open Sans", sans-serif;

    outline: 0;

    font-size: 1.2em;

    text-align: center;

    width: 50px;

    height: 50px;

    color: $text-color;

    line-height: 40px;

    border: 1px solid #ccc;

    border-right: 0;

  }

}



button[type="button"] {

  cursor: pointer;

  width: 168px;

  border: none;

  color: $text-color;

  background: #fff;

  height: 50px;

  font-size: 1.2em;

  font-family: 'Open Sans', sans-serif;

  transition: all .2s;

  border: 1px solid #ccc;

  box-shadow: 0 1px 2px #fff;

  &:hover {

    box-shadow: 0 1px 2px #cbc3ba;

  }

  &:active,

  &:focus {

    outline: none;

  }

}



.rotate-x {

  animation-duration: .6s;

  animation-name: rotate-x;

}



@keyframes rotate-x {

  from {

    transform: rotateY(0deg);

  }

  to {

    transform: rotateY(360deg);

  }

}

<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty()">+</i>

          <i class="decrement" onclick="decrementQty()">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty()">+</i>

          <i class="decrement" onclick="decrementQty()">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty()">+</i>

          <i class="decrement" onclick="decrementQty()">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>

asked Nov 29 '18 at 2:53

gofish1234

495

function incrementQty() {

  var value = document.querySelector('input[name="qty"]').value;

  var cardQty = document.querySelector(".cart-qty");

  value = isNaN(value) ? 1 : value;

  value++;

  document.querySelector('input[name="qty"]').value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function decrementQty() {

  var value = document.querySelector('input[name="qty"]').value;

  var cardQty = document.querySelector(".cart-qty");

  value = isNaN(value) ? 1 : value;

  value > 1 ? value-- : value;

  document.querySelector('input[name="qty"]').value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function removeAnimation(e) {

  e.target.classList.remove("rotate-x");

}



const counter = document.querySelector(".cart-qty");

counter.addEventListener("animationend", removeAnimation);

$text-color: #2a2a2a;

$bg-color: #f2eee9;

*,

*:before,

*:after {

  box-sizing: border-box;

}



@mixin clearfix {

  content: '';

  display: table;

  clear: both;

}



body {

  font-family: 'Open Sans', sans-serif;

  color: $text-color;

  display: flex;

  height: 100vh;

  align-items: center;

  font-size: 14px;

  background: $bg-color;

  background-size: cover;

}



.container {

  position: relative;

  width: 100%;

  max-width: 280px;

  margin: 0 auto;

  &:after {

    @include clearfix;

  }

}



h1 {

  display: inline-block;

  background-color: $text-color;

  color: #fff;

  font-size: 20px;

  font-weight: normal;

  text-transform: uppercase;

  padding: 4px 20px;

  float: left;

}



.item {

  background-color: #fff;

  padding: 10px;

  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);

  border: 1px solid #FFFEFD;

  img {

    display: block;

    margin: auto;

    padding: 20px;

    width: 180px;

  }

  h2 {

    font-size: 1.1em;

    font-weight: normal;

    display: block;

    border-bottom: 1px solid #ccc;

    margin: 10px 0 10px 0;

    padding: 0 0 5px 0;

    em {

      display: block;

      line-height: 1.6;

      font-size: .8em;

    }

  }

}



.cart-button {

  float: right;

  margin: 12px 15px 0 0;

  img {

    width: 30px;

    height: 30px;

    margin: 0 auto;

    display: block;

    color: #888;

  }

  .cart-qty {

    background: #ff5252;

    border-radius: 50%;

    color: #fff;

    display: block;

    font-size: .8em;

    line-height: 17px;

    position: absolute;

    text-align: center;

    top: 11px;

    right: 10px;

    height: 17px;

    width: 17px;

  }

}



.qty-block {

  margin-top: 20px;

}



.qty {

  float: left;

  width: 80px;

  margin-right: 10px;

  user-select: none;

}



.increment,

.decrement {

  .qty_inc_dec & {

    float: left;

    text-align: center;

    width: 30px;

    cursor: pointer;

    font-size: 1.2em;

    line-height: 20px;

    height: 25px;

    vertical-align: middle;

    background-color: #fff;

    border: 1px solid #ccc;

  }

}



.increment {

  .qty_inc_dec & {

    border-bottom: 0;

    line-height: 25px;

  }

}



.qty_inc_dec {

  float: left;

  width: 10px;

  height: 50px;

  display: inline-block;

}



input[type="text"] {

  .qty & {

    float: left;

    font-family: "Open Sans", sans-serif;

    outline: 0;

    font-size: 1.2em;

    text-align: center;

    width: 50px;

    height: 50px;

    color: $text-color;

    line-height: 40px;

    border: 1px solid #ccc;

    border-right: 0;

  }

}



button[type="button"] {

  cursor: pointer;

  width: 168px;

  border: none;

  color: $text-color;

  background: #fff;

  height: 50px;

  font-size: 1.2em;

  font-family: 'Open Sans', sans-serif;

  transition: all .2s;

  border: 1px solid #ccc;

  box-shadow: 0 1px 2px #fff;

  &:hover {

    box-shadow: 0 1px 2px #cbc3ba;

  }

  &:active,

  &:focus {

    outline: none;

  }

}



.rotate-x {

  animation-duration: .6s;

  animation-name: rotate-x;

}



@keyframes rotate-x {

  from {

    transform: rotateY(0deg);

  }

  to {

    transform: rotateY(360deg);

  }

}

<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty()">+</i>

          <i class="decrement" onclick="decrementQty()">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty()">+</i>

          <i class="decrement" onclick="decrementQty()">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty()">+</i>

          <i class="decrement" onclick="decrementQty()">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>

function incrementQty() {

  var value = document.querySelector('input[name="qty"]').value;

  var cardQty = document.querySelector(".cart-qty");

  value = isNaN(value) ? 1 : value;

  value++;

  document.querySelector('input[name="qty"]').value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function decrementQty() {

  var value = document.querySelector('input[name="qty"]').value;

  var cardQty = document.querySelector(".cart-qty");

  value = isNaN(value) ? 1 : value;

  value > 1 ? value-- : value;

  document.querySelector('input[name="qty"]').value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function removeAnimation(e) {

  e.target.classList.remove("rotate-x");

}



const counter = document.querySelector(".cart-qty");

counter.addEventListener("animationend", removeAnimation);

$text-color: #2a2a2a;

$bg-color: #f2eee9;

*,

*:before,

*:after {

  box-sizing: border-box;

}



@mixin clearfix {

  content: '';

  display: table;

  clear: both;

}



body {

  font-family: 'Open Sans', sans-serif;

  color: $text-color;

  display: flex;

  height: 100vh;

  align-items: center;

  font-size: 14px;

  background: $bg-color;

  background-size: cover;

}



.container {

  position: relative;

  width: 100%;

  max-width: 280px;

  margin: 0 auto;

  &:after {

    @include clearfix;

  }

}



h1 {

  display: inline-block;

  background-color: $text-color;

  color: #fff;

  font-size: 20px;

  font-weight: normal;

  text-transform: uppercase;

  padding: 4px 20px;

  float: left;

}



.item {

  background-color: #fff;

  padding: 10px;

  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);

  border: 1px solid #FFFEFD;

  img {

    display: block;

    margin: auto;

    padding: 20px;

    width: 180px;

  }

  h2 {

    font-size: 1.1em;

    font-weight: normal;

    display: block;

    border-bottom: 1px solid #ccc;

    margin: 10px 0 10px 0;

    padding: 0 0 5px 0;

    em {

      display: block;

      line-height: 1.6;

      font-size: .8em;

    }

  }

}



.cart-button {

  float: right;

  margin: 12px 15px 0 0;

  img {

    width: 30px;

    height: 30px;

    margin: 0 auto;

    display: block;

    color: #888;

  }

  .cart-qty {

    background: #ff5252;

    border-radius: 50%;

    color: #fff;

    display: block;

    font-size: .8em;

    line-height: 17px;

    position: absolute;

    text-align: center;

    top: 11px;

    right: 10px;

    height: 17px;

    width: 17px;

  }

}



.qty-block {

  margin-top: 20px;

}



.qty {

  float: left;

  width: 80px;

  margin-right: 10px;

  user-select: none;

}



.increment,

.decrement {

  .qty_inc_dec & {

    float: left;

    text-align: center;

    width: 30px;

    cursor: pointer;

    font-size: 1.2em;

    line-height: 20px;

    height: 25px;

    vertical-align: middle;

    background-color: #fff;

    border: 1px solid #ccc;

  }

}



.increment {

  .qty_inc_dec & {

    border-bottom: 0;

    line-height: 25px;

  }

}



.qty_inc_dec {

  float: left;

  width: 10px;

  height: 50px;

  display: inline-block;

}



input[type="text"] {

  .qty & {

    float: left;

    font-family: "Open Sans", sans-serif;

    outline: 0;

    font-size: 1.2em;

    text-align: center;

    width: 50px;

    height: 50px;

    color: $text-color;

    line-height: 40px;

    border: 1px solid #ccc;

    border-right: 0;

  }

}



button[type="button"] {

  cursor: pointer;

  width: 168px;

  border: none;

  color: $text-color;

  background: #fff;

  height: 50px;

  font-size: 1.2em;

  font-family: 'Open Sans', sans-serif;

  transition: all .2s;

  border: 1px solid #ccc;

  box-shadow: 0 1px 2px #fff;

  &:hover {

    box-shadow: 0 1px 2px #cbc3ba;

  }

  &:active,

  &:focus {

    outline: none;

  }

}



.rotate-x {

  animation-duration: .6s;

  animation-name: rotate-x;

}



@keyframes rotate-x {

  from {

    transform: rotateY(0deg);

  }

  to {

    transform: rotateY(360deg);

  }

}

<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty()">+</i>

          <i class="decrement" onclick="decrementQty()">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty()">+</i>

          <i class="decrement" onclick="decrementQty()">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty()">+</i>

          <i class="decrement" onclick="decrementQty()">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>

function incrementQty() {

  var value = document.querySelector('input[name="qty"]').value;

  var cardQty = document.querySelector(".cart-qty");

  value = isNaN(value) ? 1 : value;

  value++;

  document.querySelector('input[name="qty"]').value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function decrementQty() {

  var value = document.querySelector('input[name="qty"]').value;

  var cardQty = document.querySelector(".cart-qty");

  value = isNaN(value) ? 1 : value;

  value > 1 ? value-- : value;

  document.querySelector('input[name="qty"]').value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function removeAnimation(e) {

  e.target.classList.remove("rotate-x");

}



const counter = document.querySelector(".cart-qty");

counter.addEventListener("animationend", removeAnimation);

$text-color: #2a2a2a;

$bg-color: #f2eee9;

*,

*:before,

*:after {

  box-sizing: border-box;

}



@mixin clearfix {

  content: '';

  display: table;

  clear: both;

}



body {

  font-family: 'Open Sans', sans-serif;

  color: $text-color;

  display: flex;

  height: 100vh;

  align-items: center;

  font-size: 14px;

  background: $bg-color;

  background-size: cover;

}



.container {

  position: relative;

  width: 100%;

  max-width: 280px;

  margin: 0 auto;

  &:after {

    @include clearfix;

  }

}



h1 {

  display: inline-block;

  background-color: $text-color;

  color: #fff;

  font-size: 20px;

  font-weight: normal;

  text-transform: uppercase;

  padding: 4px 20px;

  float: left;

}



.item {

  background-color: #fff;

  padding: 10px;

  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);

  border: 1px solid #FFFEFD;

  img {

    display: block;

    margin: auto;

    padding: 20px;

    width: 180px;

  }

  h2 {

    font-size: 1.1em;

    font-weight: normal;

    display: block;

    border-bottom: 1px solid #ccc;

    margin: 10px 0 10px 0;

    padding: 0 0 5px 0;

    em {

      display: block;

      line-height: 1.6;

      font-size: .8em;

    }

  }

}



.cart-button {

  float: right;

  margin: 12px 15px 0 0;

  img {

    width: 30px;

    height: 30px;

    margin: 0 auto;

    display: block;

    color: #888;

  }

  .cart-qty {

    background: #ff5252;

    border-radius: 50%;

    color: #fff;

    display: block;

    font-size: .8em;

    line-height: 17px;

    position: absolute;

    text-align: center;

    top: 11px;

    right: 10px;

    height: 17px;

    width: 17px;

  }

}



.qty-block {

  margin-top: 20px;

}



.qty {

  float: left;

  width: 80px;

  margin-right: 10px;

  user-select: none;

}



.increment,

.decrement {

  .qty_inc_dec & {

    float: left;

    text-align: center;

    width: 30px;

    cursor: pointer;

    font-size: 1.2em;

    line-height: 20px;

    height: 25px;

    vertical-align: middle;

    background-color: #fff;

    border: 1px solid #ccc;

  }

}



.increment {

  .qty_inc_dec & {

    border-bottom: 0;

    line-height: 25px;

  }

}



.qty_inc_dec {

  float: left;

  width: 10px;

  height: 50px;

  display: inline-block;

}



input[type="text"] {

  .qty & {

    float: left;

    font-family: "Open Sans", sans-serif;

    outline: 0;

    font-size: 1.2em;

    text-align: center;

    width: 50px;

    height: 50px;

    color: $text-color;

    line-height: 40px;

    border: 1px solid #ccc;

    border-right: 0;

  }

}



button[type="button"] {

  cursor: pointer;

  width: 168px;

  border: none;

  color: $text-color;

  background: #fff;

  height: 50px;

  font-size: 1.2em;

  font-family: 'Open Sans', sans-serif;

  transition: all .2s;

  border: 1px solid #ccc;

  box-shadow: 0 1px 2px #fff;

  &:hover {

    box-shadow: 0 1px 2px #cbc3ba;

  }

  &:active,

  &:focus {

    outline: none;

  }

}



.rotate-x {

  animation-duration: .6s;

  animation-name: rotate-x;

}



@keyframes rotate-x {

  from {

    transform: rotateY(0deg);

  }

  to {

    transform: rotateY(360deg);

  }

}

<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty()">+</i>

          <i class="decrement" onclick="decrementQty()">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty()">+</i>

          <i class="decrement" onclick="decrementQty()">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty()">+</i>

          <i class="decrement" onclick="decrementQty()">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>

javascript html css input

asked Nov 29 '18 at 2:53

gofish1234

495

asked Nov 29 '18 at 2:53

gofish1234

495

asked Nov 29 '18 at 2:53

gofish1234

495

asked Nov 29 '18 at 2:53

gofish1234

495

asked Nov 29 '18 at 2:53

gofish1234

495

1

Please see How to create a minimal, complete and verifiable example. You have multiple elements with name="qty", the query document.querySelector('input[name="qty"]') always returns the first one in the document (if there is one).

– RobG
Nov 29 '18 at 2:58

add a comment |

1

Please see How to create a minimal, complete and verifiable example. You have multiple elements with name="qty", the query document.querySelector('input[name="qty"]') always returns the first one in the document (if there is one).

– RobG
Nov 29 '18 at 2:58

Please see How to create a minimal, complete and verifiable example. You have multiple elements with name="qty", the query document.querySelector('input[name="qty"]') always returns the first one in the document (if there is one).

– RobG
Nov 29 '18 at 2:58

add a comment |

3 Answers
3

active

oldest

votes

Short answer is no. You cannot do it with your current setup. Why? There should be a unique identifier for each item that you have. Let just say we will attach the unique identifier in your container div (since this seems to be the parent for each item).

Of course i would do this differently and add an id but just for demo purposes i made the html structure closest to what you have.

Add a number/id as class for your container class="container-1". Autoincrement the number during creation of the dom

Pass the number/id in your increment/decrement function. This will help identify which control you are reffering to.

change query selector to get container parent in the query selector clause
e.g. var cardQty = document.querySelector('.container-'+num+' .cart-qty');

And there you go. It is now working.

function incrementQty(num) {

  var targetQtyTextbox= '.container-'+num+' input[name="qty"]';

  var value = document.querySelector(targetQtyTextbox).value;

  var cardQty = document.querySelector('.container-'+num+' .cart-qty');

  value = isNaN(value) ? 1 : value;

  value++;

  document.querySelector(targetQtyTextbox).value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function decrementQty(num) {

  var targetQtyTextbox= '.container-'+num+' input[name="qty"]';

  var value = document.querySelector(targetQtyTextbox).value;

  var cardQty = document.querySelector('.container-'+num+' .cart-qty');

  value = isNaN(value) ? 1 : value;

  value > 1 ? value-- : value;

  document.querySelector(targetQtyTextbox).value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function removeAnimation(e) {

  e.target.classList.remove("rotate-x");

}



const counter = document.querySelector(".cart-qty");

counter.addEventListener("animationend", removeAnimation);

$text-color: #2a2a2a;

$bg-color: #f2eee9;

*,

*:before,

*:after {

  box-sizing: border-box;

}



@mixin clearfix {

  content: '';

  display: table;

  clear: both;

}



body {

  font-family: 'Open Sans', sans-serif;

  color: $text-color;

  display: flex;

  height: 100vh;

  align-items: center;

  font-size: 14px;

  background: $bg-color;

  background-size: cover;

}



.container {

  position: relative;

  width: 100%;

  max-width: 280px;

  margin: 0 auto;

  &:after {

    @include clearfix;

  }

}



h1 {

  display: inline-block;

  background-color: $text-color;

  color: #fff;

  font-size: 20px;

  font-weight: normal;

  text-transform: uppercase;

  padding: 4px 20px;

  float: left;

}



.item {

  background-color: #fff;

  padding: 10px;

  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);

  border: 1px solid #FFFEFD;

  img {

    display: block;

    margin: auto;

    padding: 20px;

    width: 180px;

  }

  h2 {

    font-size: 1.1em;

    font-weight: normal;

    display: block;

    border-bottom: 1px solid #ccc;

    margin: 10px 0 10px 0;

    padding: 0 0 5px 0;

    em {

      display: block;

      line-height: 1.6;

      font-size: .8em;

    }

  }

}



.cart-button {

  float: right;

  margin: 12px 15px 0 0;

  img {

    width: 30px;

    height: 30px;

    margin: 0 auto;

    display: block;

    color: #888;

  }

  .cart-qty {

    background: #ff5252;

    border-radius: 50%;

    color: #fff;

    display: block;

    font-size: .8em;

    line-height: 17px;

    position: absolute;

    text-align: center;

    top: 11px;

    right: 10px;

    height: 17px;

    width: 17px;

  }

}



.qty-block {

  margin-top: 20px;

}



.qty {

  float: left;

  width: 80px;

  margin-right: 10px;

  user-select: none;

}



.increment,

.decrement {

  .qty_inc_dec & {

    float: left;

    text-align: center;

    width: 30px;

    cursor: pointer;

    font-size: 1.2em;

    line-height: 20px;

    height: 25px;

    vertical-align: middle;

    background-color: #fff;

    border: 1px solid #ccc;

  }

}



.increment {

  .qty_inc_dec & {

    border-bottom: 0;

    line-height: 25px;

  }

}



.qty_inc_dec {

  float: left;

  width: 10px;

  height: 50px;

  display: inline-block;

}



input[type="text"] {

  .qty & {

    float: left;

    font-family: "Open Sans", sans-serif;

    outline: 0;

    font-size: 1.2em;

    text-align: center;

    width: 50px;

    height: 50px;

    color: $text-color;

    line-height: 40px;

    border: 1px solid #ccc;

    border-right: 0;

  }

}



button[type="button"] {

  cursor: pointer;

  width: 168px;

  border: none;

  color: $text-color;

  background: #fff;

  height: 50px;

  font-size: 1.2em;

  font-family: 'Open Sans', sans-serif;

  transition: all .2s;

  border: 1px solid #ccc;

  box-shadow: 0 1px 2px #fff;

  &:hover {

    box-shadow: 0 1px 2px #cbc3ba;

  }

  &:active,

  &:focus {

    outline: none;

  }

}



.rotate-x {

  animation-duration: .6s;

  animation-name: rotate-x;

}



@keyframes rotate-x {

  from {

    transform: rotateY(0deg);

  }

  to {

    transform: rotateY(360deg);

  }

}

<div class="container-1">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty(1)">+</i>

          <i class="decrement" onclick="decrementQty(1)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container-2">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty(2)">+</i>

          <i class="decrement" onclick="decrementQty(2)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container-3">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty(3)">+</i>

          <i class="decrement" onclick="decrementQty(3)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>

answered Nov 29 '18 at 3:41

TheProvost

1,1631931

this worked! thank you very much for taking the time to explain.

– gofish1234
Nov 29 '18 at 4:52

glad i could help. Please also look into the other answer. var index = .indexOf.call(increment, _this) <--- this gets the index of the current object from the "increment" selector. Useful if you dont want to create the id, but would still suggest to use my approach as it would be better to have an identifier for the item

– TheProvost
Dec 5 '18 at 2:27

add a comment |

document.querySelector only picks out the first matching css selector.

Therefore, you will want to use document.querySelectorAll, and attach increment/decrement handlers to each array element.

answered Nov 29 '18 at 3:03

achacttn

15127

add a comment |

function incrementQty(_this) {

  // get All increment button

  var increment = document.querySelectorAll(".increment"); 

  // get index click button      

  var index = .indexOf.call(increment, _this)

  // get qty to index

  var value = document.querySelectorAll('input[name="qty"]')[index].value;

  // get cart-qty to index

  var cardQty = document.querySelectorAll(".cart-qty")[index];

  value = isNaN(value) ? 1 : value;

  value++;

  document.querySelectorAll('input[name="qty"]')[index].value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function decrementQty(_this) {

  var decrement = document.querySelectorAll(".decrement");

  var index = .indexOf.call(decrement, _this)

  var value = document.querySelectorAll('input[name="qty"]')[index].value;

  var cardQty = document.querySelectorAll(".cart-qty")[index];

  value = isNaN(value) ? 1 : value;

  value > 1 ? value-- : value;

  document.querySelectorAll('input[name="qty"]')[index].value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function removeAnimation(e) {

  e.target.classList.remove("rotate-x");

}



const counter = document.querySelector(".cart-qty");

counter.addEventListener("animationend", removeAnimation);

$text-color: #2a2a2a;

$bg-color: #f2eee9;

*,

*:before,

*:after {

  box-sizing: border-box;

}



@mixin clearfix {

  content: '';

  display: table;

  clear: both;

}



body {

  font-family: 'Open Sans', sans-serif;

  color: $text-color;

  display: flex;

  height: 100vh;

  align-items: center;

  font-size: 14px;

  background: $bg-color;

  background-size: cover;

}



.container {

  position: relative;

  width: 100%;

  max-width: 280px;

  margin: 0 auto;

  &:after {

    @include clearfix;

  }

}



h1 {

  display: inline-block;

  background-color: $text-color;

  color: #fff;

  font-size: 20px;

  font-weight: normal;

  text-transform: uppercase;

  padding: 4px 20px;

  float: left;

}



.item {

  background-color: #fff;

  padding: 10px;

  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);

  border: 1px solid #FFFEFD;

  img {

    display: block;

    margin: auto;

    padding: 20px;

    width: 180px;

  }

  h2 {

    font-size: 1.1em;

    font-weight: normal;

    display: block;

    border-bottom: 1px solid #ccc;

    margin: 10px 0 10px 0;

    padding: 0 0 5px 0;

    em {

      display: block;

      line-height: 1.6;

      font-size: .8em;

    }

  }

}



.cart-button {

  float: right;

  margin: 12px 15px 0 0;

  img {

    width: 30px;

    height: 30px;

    margin: 0 auto;

    display: block;

    color: #888;

  }

  .cart-qty {

    background: #ff5252;

    border-radius: 50%;

    color: #fff;

    display: block;

    font-size: .8em;

    line-height: 17px;

    position: absolute;

    text-align: center;

    top: 11px;

    right: 10px;

    height: 17px;

    width: 17px;

  }

}



.qty-block {

  margin-top: 20px;

}



.qty {

  float: left;

  width: 80px;

  margin-right: 10px;

  user-select: none;

}



.increment,

.decrement {

  .qty_inc_dec & {

    float: left;

    text-align: center;

    width: 30px;

    cursor: pointer;

    font-size: 1.2em;

    line-height: 20px;

    height: 25px;

    vertical-align: middle;

    background-color: #fff;

    border: 1px solid #ccc;

  }

}



.increment {

  .qty_inc_dec & {

    border-bottom: 0;

    line-height: 25px;

  }

}



.qty_inc_dec {

  float: left;

  width: 10px;

  height: 50px;

  display: inline-block;

}



input[type="text"] {

  .qty & {

    float: left;

    font-family: "Open Sans", sans-serif;

    outline: 0;

    font-size: 1.2em;

    text-align: center;

    width: 50px;

    height: 50px;

    color: $text-color;

    line-height: 40px;

    border: 1px solid #ccc;

    border-right: 0;

  }

}



button[type="button"] {

  cursor: pointer;

  width: 168px;

  border: none;

  color: $text-color;

  background: #fff;

  height: 50px;

  font-size: 1.2em;

  font-family: 'Open Sans', sans-serif;

  transition: all .2s;

  border: 1px solid #ccc;

  box-shadow: 0 1px 2px #fff;

  &:hover {

    box-shadow: 0 1px 2px #cbc3ba;

  }

  &:active,

  &:focus {

    outline: none;

  }

}



.rotate-x {

  animation-duration: .6s;

  animation-name: rotate-x;

}



@keyframes rotate-x {

  from {

    transform: rotateY(0deg);

  }

  to {

    transform: rotateY(360deg);

  }

}

<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <!-- incrementQty() => incrementQty(this) -->

          <i class="increment" onclick="incrementQty(this)">+</i>

          <i class="decrement" onclick="decrementQty(this)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty(this)">+</i>

          <i class="decrement" onclick="decrementQty(this)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty(this)">+</i>

          <i class="decrement" onclick="decrementQty(this)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>

edited Nov 30 '18 at 6:21

answered Nov 29 '18 at 3:25

심심이

693

Can you provide an explanation of what was changed and why?

– jhpratt
Nov 29 '18 at 3:28

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53531160%2fhow-can-i-get-this-javascript-to-work-more-than-once%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

Of course i would do this differently and add an id but just for demo purposes i made the html structure closest to what you have.

Add a number/id as class for your container class="container-1". Autoincrement the number during creation of the dom

Pass the number/id in your increment/decrement function. This will help identify which control you are reffering to.

change query selector to get container parent in the query selector clause
e.g. var cardQty = document.querySelector('.container-'+num+' .cart-qty');

And there you go. It is now working.

function incrementQty(num) {

  var targetQtyTextbox= '.container-'+num+' input[name="qty"]';

  var value = document.querySelector(targetQtyTextbox).value;

  var cardQty = document.querySelector('.container-'+num+' .cart-qty');

  value = isNaN(value) ? 1 : value;

  value++;

  document.querySelector(targetQtyTextbox).value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function decrementQty(num) {

  var targetQtyTextbox= '.container-'+num+' input[name="qty"]';

  var value = document.querySelector(targetQtyTextbox).value;

  var cardQty = document.querySelector('.container-'+num+' .cart-qty');

  value = isNaN(value) ? 1 : value;

  value > 1 ? value-- : value;

  document.querySelector(targetQtyTextbox).value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function removeAnimation(e) {

  e.target.classList.remove("rotate-x");

}



const counter = document.querySelector(".cart-qty");

counter.addEventListener("animationend", removeAnimation);

$text-color: #2a2a2a;

$bg-color: #f2eee9;

*,

*:before,

*:after {

  box-sizing: border-box;

}



@mixin clearfix {

  content: '';

  display: table;

  clear: both;

}



body {

  font-family: 'Open Sans', sans-serif;

  color: $text-color;

  display: flex;

  height: 100vh;

  align-items: center;

  font-size: 14px;

  background: $bg-color;

  background-size: cover;

}



.container {

  position: relative;

  width: 100%;

  max-width: 280px;

  margin: 0 auto;

  &:after {

    @include clearfix;

  }

}



h1 {

  display: inline-block;

  background-color: $text-color;

  color: #fff;

  font-size: 20px;

  font-weight: normal;

  text-transform: uppercase;

  padding: 4px 20px;

  float: left;

}



.item {

  background-color: #fff;

  padding: 10px;

  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);

  border: 1px solid #FFFEFD;

  img {

    display: block;

    margin: auto;

    padding: 20px;

    width: 180px;

  }

  h2 {

    font-size: 1.1em;

    font-weight: normal;

    display: block;

    border-bottom: 1px solid #ccc;

    margin: 10px 0 10px 0;

    padding: 0 0 5px 0;

    em {

      display: block;

      line-height: 1.6;

      font-size: .8em;

    }

  }

}



.cart-button {

  float: right;

  margin: 12px 15px 0 0;

  img {

    width: 30px;

    height: 30px;

    margin: 0 auto;

    display: block;

    color: #888;

  }

  .cart-qty {

    background: #ff5252;

    border-radius: 50%;

    color: #fff;

    display: block;

    font-size: .8em;

    line-height: 17px;

    position: absolute;

    text-align: center;

    top: 11px;

    right: 10px;

    height: 17px;

    width: 17px;

  }

}



.qty-block {

  margin-top: 20px;

}



.qty {

  float: left;

  width: 80px;

  margin-right: 10px;

  user-select: none;

}



.increment,

.decrement {

  .qty_inc_dec & {

    float: left;

    text-align: center;

    width: 30px;

    cursor: pointer;

    font-size: 1.2em;

    line-height: 20px;

    height: 25px;

    vertical-align: middle;

    background-color: #fff;

    border: 1px solid #ccc;

  }

}



.increment {

  .qty_inc_dec & {

    border-bottom: 0;

    line-height: 25px;

  }

}



.qty_inc_dec {

  float: left;

  width: 10px;

  height: 50px;

  display: inline-block;

}



input[type="text"] {

  .qty & {

    float: left;

    font-family: "Open Sans", sans-serif;

    outline: 0;

    font-size: 1.2em;

    text-align: center;

    width: 50px;

    height: 50px;

    color: $text-color;

    line-height: 40px;

    border: 1px solid #ccc;

    border-right: 0;

  }

}



button[type="button"] {

  cursor: pointer;

  width: 168px;

  border: none;

  color: $text-color;

  background: #fff;

  height: 50px;

  font-size: 1.2em;

  font-family: 'Open Sans', sans-serif;

  transition: all .2s;

  border: 1px solid #ccc;

  box-shadow: 0 1px 2px #fff;

  &:hover {

    box-shadow: 0 1px 2px #cbc3ba;

  }

  &:active,

  &:focus {

    outline: none;

  }

}



.rotate-x {

  animation-duration: .6s;

  animation-name: rotate-x;

}



@keyframes rotate-x {

  from {

    transform: rotateY(0deg);

  }

  to {

    transform: rotateY(360deg);

  }

}

<div class="container-1">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty(1)">+</i>

          <i class="decrement" onclick="decrementQty(1)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container-2">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty(2)">+</i>

          <i class="decrement" onclick="decrementQty(2)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container-3">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty(3)">+</i>

          <i class="decrement" onclick="decrementQty(3)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>

answered Nov 29 '18 at 3:41

TheProvost

1,1631931

this worked! thank you very much for taking the time to explain.

– gofish1234
Nov 29 '18 at 4:52

glad i could help. Please also look into the other answer. var index = .indexOf.call(increment, _this) <--- this gets the index of the current object from the "increment" selector. Useful if you dont want to create the id, but would still suggest to use my approach as it would be better to have an identifier for the item

– TheProvost
Dec 5 '18 at 2:27

add a comment |

Of course i would do this differently and add an id but just for demo purposes i made the html structure closest to what you have.

Add a number/id as class for your container class="container-1". Autoincrement the number during creation of the dom

Pass the number/id in your increment/decrement function. This will help identify which control you are reffering to.

change query selector to get container parent in the query selector clause
e.g. var cardQty = document.querySelector('.container-'+num+' .cart-qty');

And there you go. It is now working.

function incrementQty(num) {

  var targetQtyTextbox= '.container-'+num+' input[name="qty"]';

  var value = document.querySelector(targetQtyTextbox).value;

  var cardQty = document.querySelector('.container-'+num+' .cart-qty');

  value = isNaN(value) ? 1 : value;

  value++;

  document.querySelector(targetQtyTextbox).value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function decrementQty(num) {

  var targetQtyTextbox= '.container-'+num+' input[name="qty"]';

  var value = document.querySelector(targetQtyTextbox).value;

  var cardQty = document.querySelector('.container-'+num+' .cart-qty');

  value = isNaN(value) ? 1 : value;

  value > 1 ? value-- : value;

  document.querySelector(targetQtyTextbox).value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function removeAnimation(e) {

  e.target.classList.remove("rotate-x");

}



const counter = document.querySelector(".cart-qty");

counter.addEventListener("animationend", removeAnimation);

$text-color: #2a2a2a;

$bg-color: #f2eee9;

*,

*:before,

*:after {

  box-sizing: border-box;

}



@mixin clearfix {

  content: '';

  display: table;

  clear: both;

}



body {

  font-family: 'Open Sans', sans-serif;

  color: $text-color;

  display: flex;

  height: 100vh;

  align-items: center;

  font-size: 14px;

  background: $bg-color;

  background-size: cover;

}



.container {

  position: relative;

  width: 100%;

  max-width: 280px;

  margin: 0 auto;

  &:after {

    @include clearfix;

  }

}



h1 {

  display: inline-block;

  background-color: $text-color;

  color: #fff;

  font-size: 20px;

  font-weight: normal;

  text-transform: uppercase;

  padding: 4px 20px;

  float: left;

}



.item {

  background-color: #fff;

  padding: 10px;

  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);

  border: 1px solid #FFFEFD;

  img {

    display: block;

    margin: auto;

    padding: 20px;

    width: 180px;

  }

  h2 {

    font-size: 1.1em;

    font-weight: normal;

    display: block;

    border-bottom: 1px solid #ccc;

    margin: 10px 0 10px 0;

    padding: 0 0 5px 0;

    em {

      display: block;

      line-height: 1.6;

      font-size: .8em;

    }

  }

}



.cart-button {

  float: right;

  margin: 12px 15px 0 0;

  img {

    width: 30px;

    height: 30px;

    margin: 0 auto;

    display: block;

    color: #888;

  }

  .cart-qty {

    background: #ff5252;

    border-radius: 50%;

    color: #fff;

    display: block;

    font-size: .8em;

    line-height: 17px;

    position: absolute;

    text-align: center;

    top: 11px;

    right: 10px;

    height: 17px;

    width: 17px;

  }

}



.qty-block {

  margin-top: 20px;

}



.qty {

  float: left;

  width: 80px;

  margin-right: 10px;

  user-select: none;

}



.increment,

.decrement {

  .qty_inc_dec & {

    float: left;

    text-align: center;

    width: 30px;

    cursor: pointer;

    font-size: 1.2em;

    line-height: 20px;

    height: 25px;

    vertical-align: middle;

    background-color: #fff;

    border: 1px solid #ccc;

  }

}



.increment {

  .qty_inc_dec & {

    border-bottom: 0;

    line-height: 25px;

  }

}



.qty_inc_dec {

  float: left;

  width: 10px;

  height: 50px;

  display: inline-block;

}



input[type="text"] {

  .qty & {

    float: left;

    font-family: "Open Sans", sans-serif;

    outline: 0;

    font-size: 1.2em;

    text-align: center;

    width: 50px;

    height: 50px;

    color: $text-color;

    line-height: 40px;

    border: 1px solid #ccc;

    border-right: 0;

  }

}



button[type="button"] {

  cursor: pointer;

  width: 168px;

  border: none;

  color: $text-color;

  background: #fff;

  height: 50px;

  font-size: 1.2em;

  font-family: 'Open Sans', sans-serif;

  transition: all .2s;

  border: 1px solid #ccc;

  box-shadow: 0 1px 2px #fff;

  &:hover {

    box-shadow: 0 1px 2px #cbc3ba;

  }

  &:active,

  &:focus {

    outline: none;

  }

}



.rotate-x {

  animation-duration: .6s;

  animation-name: rotate-x;

}



@keyframes rotate-x {

  from {

    transform: rotateY(0deg);

  }

  to {

    transform: rotateY(360deg);

  }

}

<div class="container-1">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty(1)">+</i>

          <i class="decrement" onclick="decrementQty(1)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container-2">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty(2)">+</i>

          <i class="decrement" onclick="decrementQty(2)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container-3">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty(3)">+</i>

          <i class="decrement" onclick="decrementQty(3)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>

answered Nov 29 '18 at 3:41

TheProvost

1,1631931

this worked! thank you very much for taking the time to explain.

– gofish1234
Nov 29 '18 at 4:52

glad i could help. Please also look into the other answer. var index = .indexOf.call(increment, _this) <--- this gets the index of the current object from the "increment" selector. Useful if you dont want to create the id, but would still suggest to use my approach as it would be better to have an identifier for the item

– TheProvost
Dec 5 '18 at 2:27

add a comment |

Of course i would do this differently and add an id but just for demo purposes i made the html structure closest to what you have.

Add a number/id as class for your container class="container-1". Autoincrement the number during creation of the dom

Pass the number/id in your increment/decrement function. This will help identify which control you are reffering to.

change query selector to get container parent in the query selector clause
e.g. var cardQty = document.querySelector('.container-'+num+' .cart-qty');

And there you go. It is now working.

function incrementQty(num) {

  var targetQtyTextbox= '.container-'+num+' input[name="qty"]';

  var value = document.querySelector(targetQtyTextbox).value;

  var cardQty = document.querySelector('.container-'+num+' .cart-qty');

  value = isNaN(value) ? 1 : value;

  value++;

  document.querySelector(targetQtyTextbox).value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function decrementQty(num) {

  var targetQtyTextbox= '.container-'+num+' input[name="qty"]';

  var value = document.querySelector(targetQtyTextbox).value;

  var cardQty = document.querySelector('.container-'+num+' .cart-qty');

  value = isNaN(value) ? 1 : value;

  value > 1 ? value-- : value;

  document.querySelector(targetQtyTextbox).value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function removeAnimation(e) {

  e.target.classList.remove("rotate-x");

}



const counter = document.querySelector(".cart-qty");

counter.addEventListener("animationend", removeAnimation);

$text-color: #2a2a2a;

$bg-color: #f2eee9;

*,

*:before,

*:after {

  box-sizing: border-box;

}



@mixin clearfix {

  content: '';

  display: table;

  clear: both;

}



body {

  font-family: 'Open Sans', sans-serif;

  color: $text-color;

  display: flex;

  height: 100vh;

  align-items: center;

  font-size: 14px;

  background: $bg-color;

  background-size: cover;

}



.container {

  position: relative;

  width: 100%;

  max-width: 280px;

  margin: 0 auto;

  &:after {

    @include clearfix;

  }

}



h1 {

  display: inline-block;

  background-color: $text-color;

  color: #fff;

  font-size: 20px;

  font-weight: normal;

  text-transform: uppercase;

  padding: 4px 20px;

  float: left;

}



.item {

  background-color: #fff;

  padding: 10px;

  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);

  border: 1px solid #FFFEFD;

  img {

    display: block;

    margin: auto;

    padding: 20px;

    width: 180px;

  }

  h2 {

    font-size: 1.1em;

    font-weight: normal;

    display: block;

    border-bottom: 1px solid #ccc;

    margin: 10px 0 10px 0;

    padding: 0 0 5px 0;

    em {

      display: block;

      line-height: 1.6;

      font-size: .8em;

    }

  }

}



.cart-button {

  float: right;

  margin: 12px 15px 0 0;

  img {

    width: 30px;

    height: 30px;

    margin: 0 auto;

    display: block;

    color: #888;

  }

  .cart-qty {

    background: #ff5252;

    border-radius: 50%;

    color: #fff;

    display: block;

    font-size: .8em;

    line-height: 17px;

    position: absolute;

    text-align: center;

    top: 11px;

    right: 10px;

    height: 17px;

    width: 17px;

  }

}



.qty-block {

  margin-top: 20px;

}



.qty {

  float: left;

  width: 80px;

  margin-right: 10px;

  user-select: none;

}



.increment,

.decrement {

  .qty_inc_dec & {

    float: left;

    text-align: center;

    width: 30px;

    cursor: pointer;

    font-size: 1.2em;

    line-height: 20px;

    height: 25px;

    vertical-align: middle;

    background-color: #fff;

    border: 1px solid #ccc;

  }

}



.increment {

  .qty_inc_dec & {

    border-bottom: 0;

    line-height: 25px;

  }

}



.qty_inc_dec {

  float: left;

  width: 10px;

  height: 50px;

  display: inline-block;

}



input[type="text"] {

  .qty & {

    float: left;

    font-family: "Open Sans", sans-serif;

    outline: 0;

    font-size: 1.2em;

    text-align: center;

    width: 50px;

    height: 50px;

    color: $text-color;

    line-height: 40px;

    border: 1px solid #ccc;

    border-right: 0;

  }

}



button[type="button"] {

  cursor: pointer;

  width: 168px;

  border: none;

  color: $text-color;

  background: #fff;

  height: 50px;

  font-size: 1.2em;

  font-family: 'Open Sans', sans-serif;

  transition: all .2s;

  border: 1px solid #ccc;

  box-shadow: 0 1px 2px #fff;

  &:hover {

    box-shadow: 0 1px 2px #cbc3ba;

  }

  &:active,

  &:focus {

    outline: none;

  }

}



.rotate-x {

  animation-duration: .6s;

  animation-name: rotate-x;

}



@keyframes rotate-x {

  from {

    transform: rotateY(0deg);

  }

  to {

    transform: rotateY(360deg);

  }

}

<div class="container-1">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty(1)">+</i>

          <i class="decrement" onclick="decrementQty(1)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container-2">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty(2)">+</i>

          <i class="decrement" onclick="decrementQty(2)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container-3">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty(3)">+</i>

          <i class="decrement" onclick="decrementQty(3)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>

answered Nov 29 '18 at 3:41

TheProvost

1,1631931

Of course i would do this differently and add an id but just for demo purposes i made the html structure closest to what you have.

Add a number/id as class for your container class="container-1". Autoincrement the number during creation of the dom

Pass the number/id in your increment/decrement function. This will help identify which control you are reffering to.

change query selector to get container parent in the query selector clause
e.g. var cardQty = document.querySelector('.container-'+num+' .cart-qty');

And there you go. It is now working.

function incrementQty(num) {

  var targetQtyTextbox= '.container-'+num+' input[name="qty"]';

  var value = document.querySelector(targetQtyTextbox).value;

  var cardQty = document.querySelector('.container-'+num+' .cart-qty');

  value = isNaN(value) ? 1 : value;

  value++;

  document.querySelector(targetQtyTextbox).value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function decrementQty(num) {

  var targetQtyTextbox= '.container-'+num+' input[name="qty"]';

  var value = document.querySelector(targetQtyTextbox).value;

  var cardQty = document.querySelector('.container-'+num+' .cart-qty');

  value = isNaN(value) ? 1 : value;

  value > 1 ? value-- : value;

  document.querySelector(targetQtyTextbox).value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function removeAnimation(e) {

  e.target.classList.remove("rotate-x");

}



const counter = document.querySelector(".cart-qty");

counter.addEventListener("animationend", removeAnimation);

$text-color: #2a2a2a;

$bg-color: #f2eee9;

*,

*:before,

*:after {

  box-sizing: border-box;

}



@mixin clearfix {

  content: '';

  display: table;

  clear: both;

}



body {

  font-family: 'Open Sans', sans-serif;

  color: $text-color;

  display: flex;

  height: 100vh;

  align-items: center;

  font-size: 14px;

  background: $bg-color;

  background-size: cover;

}



.container {

  position: relative;

  width: 100%;

  max-width: 280px;

  margin: 0 auto;

  &:after {

    @include clearfix;

  }

}



h1 {

  display: inline-block;

  background-color: $text-color;

  color: #fff;

  font-size: 20px;

  font-weight: normal;

  text-transform: uppercase;

  padding: 4px 20px;

  float: left;

}



.item {

  background-color: #fff;

  padding: 10px;

  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);

  border: 1px solid #FFFEFD;

  img {

    display: block;

    margin: auto;

    padding: 20px;

    width: 180px;

  }

  h2 {

    font-size: 1.1em;

    font-weight: normal;

    display: block;

    border-bottom: 1px solid #ccc;

    margin: 10px 0 10px 0;

    padding: 0 0 5px 0;

    em {

      display: block;

      line-height: 1.6;

      font-size: .8em;

    }

  }

}



.cart-button {

  float: right;

  margin: 12px 15px 0 0;

  img {

    width: 30px;

    height: 30px;

    margin: 0 auto;

    display: block;

    color: #888;

  }

  .cart-qty {

    background: #ff5252;

    border-radius: 50%;

    color: #fff;

    display: block;

    font-size: .8em;

    line-height: 17px;

    position: absolute;

    text-align: center;

    top: 11px;

    right: 10px;

    height: 17px;

    width: 17px;

  }

}



.qty-block {

  margin-top: 20px;

}



.qty {

  float: left;

  width: 80px;

  margin-right: 10px;

  user-select: none;

}



.increment,

.decrement {

  .qty_inc_dec & {

    float: left;

    text-align: center;

    width: 30px;

    cursor: pointer;

    font-size: 1.2em;

    line-height: 20px;

    height: 25px;

    vertical-align: middle;

    background-color: #fff;

    border: 1px solid #ccc;

  }

}



.increment {

  .qty_inc_dec & {

    border-bottom: 0;

    line-height: 25px;

  }

}



.qty_inc_dec {

  float: left;

  width: 10px;

  height: 50px;

  display: inline-block;

}



input[type="text"] {

  .qty & {

    float: left;

    font-family: "Open Sans", sans-serif;

    outline: 0;

    font-size: 1.2em;

    text-align: center;

    width: 50px;

    height: 50px;

    color: $text-color;

    line-height: 40px;

    border: 1px solid #ccc;

    border-right: 0;

  }

}



button[type="button"] {

  cursor: pointer;

  width: 168px;

  border: none;

  color: $text-color;

  background: #fff;

  height: 50px;

  font-size: 1.2em;

  font-family: 'Open Sans', sans-serif;

  transition: all .2s;

  border: 1px solid #ccc;

  box-shadow: 0 1px 2px #fff;

  &:hover {

    box-shadow: 0 1px 2px #cbc3ba;

  }

  &:active,

  &:focus {

    outline: none;

  }

}



.rotate-x {

  animation-duration: .6s;

  animation-name: rotate-x;

}



@keyframes rotate-x {

  from {

    transform: rotateY(0deg);

  }

  to {

    transform: rotateY(360deg);

  }

}

<div class="container-1">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty(1)">+</i>

          <i class="decrement" onclick="decrementQty(1)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container-2">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty(2)">+</i>

          <i class="decrement" onclick="decrementQty(2)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container-3">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty(3)">+</i>

          <i class="decrement" onclick="decrementQty(3)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>

function incrementQty(num) {

  var targetQtyTextbox= '.container-'+num+' input[name="qty"]';

  var value = document.querySelector(targetQtyTextbox).value;

  var cardQty = document.querySelector('.container-'+num+' .cart-qty');

  value = isNaN(value) ? 1 : value;

  value++;

  document.querySelector(targetQtyTextbox).value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function decrementQty(num) {

  var targetQtyTextbox= '.container-'+num+' input[name="qty"]';

  var value = document.querySelector(targetQtyTextbox).value;

  var cardQty = document.querySelector('.container-'+num+' .cart-qty');

  value = isNaN(value) ? 1 : value;

  value > 1 ? value-- : value;

  document.querySelector(targetQtyTextbox).value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function removeAnimation(e) {

  e.target.classList.remove("rotate-x");

}



const counter = document.querySelector(".cart-qty");

counter.addEventListener("animationend", removeAnimation);

$text-color: #2a2a2a;

$bg-color: #f2eee9;

*,

*:before,

*:after {

  box-sizing: border-box;

}



@mixin clearfix {

  content: '';

  display: table;

  clear: both;

}



body {

  font-family: 'Open Sans', sans-serif;

  color: $text-color;

  display: flex;

  height: 100vh;

  align-items: center;

  font-size: 14px;

  background: $bg-color;

  background-size: cover;

}



.container {

  position: relative;

  width: 100%;

  max-width: 280px;

  margin: 0 auto;

  &:after {

    @include clearfix;

  }

}



h1 {

  display: inline-block;

  background-color: $text-color;

  color: #fff;

  font-size: 20px;

  font-weight: normal;

  text-transform: uppercase;

  padding: 4px 20px;

  float: left;

}



.item {

  background-color: #fff;

  padding: 10px;

  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);

  border: 1px solid #FFFEFD;

  img {

    display: block;

    margin: auto;

    padding: 20px;

    width: 180px;

  }

  h2 {

    font-size: 1.1em;

    font-weight: normal;

    display: block;

    border-bottom: 1px solid #ccc;

    margin: 10px 0 10px 0;

    padding: 0 0 5px 0;

    em {

      display: block;

      line-height: 1.6;

      font-size: .8em;

    }

  }

}



.cart-button {

  float: right;

  margin: 12px 15px 0 0;

  img {

    width: 30px;

    height: 30px;

    margin: 0 auto;

    display: block;

    color: #888;

  }

  .cart-qty {

    background: #ff5252;

    border-radius: 50%;

    color: #fff;

    display: block;

    font-size: .8em;

    line-height: 17px;

    position: absolute;

    text-align: center;

    top: 11px;

    right: 10px;

    height: 17px;

    width: 17px;

  }

}



.qty-block {

  margin-top: 20px;

}



.qty {

  float: left;

  width: 80px;

  margin-right: 10px;

  user-select: none;

}



.increment,

.decrement {

  .qty_inc_dec & {

    float: left;

    text-align: center;

    width: 30px;

    cursor: pointer;

    font-size: 1.2em;

    line-height: 20px;

    height: 25px;

    vertical-align: middle;

    background-color: #fff;

    border: 1px solid #ccc;

  }

}



.increment {

  .qty_inc_dec & {

    border-bottom: 0;

    line-height: 25px;

  }

}



.qty_inc_dec {

  float: left;

  width: 10px;

  height: 50px;

  display: inline-block;

}



input[type="text"] {

  .qty & {

    float: left;

    font-family: "Open Sans", sans-serif;

    outline: 0;

    font-size: 1.2em;

    text-align: center;

    width: 50px;

    height: 50px;

    color: $text-color;

    line-height: 40px;

    border: 1px solid #ccc;

    border-right: 0;

  }

}



button[type="button"] {

  cursor: pointer;

  width: 168px;

  border: none;

  color: $text-color;

  background: #fff;

  height: 50px;

  font-size: 1.2em;

  font-family: 'Open Sans', sans-serif;

  transition: all .2s;

  border: 1px solid #ccc;

  box-shadow: 0 1px 2px #fff;

  &:hover {

    box-shadow: 0 1px 2px #cbc3ba;

  }

  &:active,

  &:focus {

    outline: none;

  }

}



.rotate-x {

  animation-duration: .6s;

  animation-name: rotate-x;

}



@keyframes rotate-x {

  from {

    transform: rotateY(0deg);

  }

  to {

    transform: rotateY(360deg);

  }

}

<div class="container-1">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty(1)">+</i>

          <i class="decrement" onclick="decrementQty(1)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container-2">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty(2)">+</i>

          <i class="decrement" onclick="decrementQty(2)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container-3">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty(3)">+</i>

          <i class="decrement" onclick="decrementQty(3)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>

function incrementQty(num) {

  var targetQtyTextbox= '.container-'+num+' input[name="qty"]';

  var value = document.querySelector(targetQtyTextbox).value;

  var cardQty = document.querySelector('.container-'+num+' .cart-qty');

  value = isNaN(value) ? 1 : value;

  value++;

  document.querySelector(targetQtyTextbox).value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function decrementQty(num) {

  var targetQtyTextbox= '.container-'+num+' input[name="qty"]';

  var value = document.querySelector(targetQtyTextbox).value;

  var cardQty = document.querySelector('.container-'+num+' .cart-qty');

  value = isNaN(value) ? 1 : value;

  value > 1 ? value-- : value;

  document.querySelector(targetQtyTextbox).value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function removeAnimation(e) {

  e.target.classList.remove("rotate-x");

}



const counter = document.querySelector(".cart-qty");

counter.addEventListener("animationend", removeAnimation);

$text-color: #2a2a2a;

$bg-color: #f2eee9;

*,

*:before,

*:after {

  box-sizing: border-box;

}



@mixin clearfix {

  content: '';

  display: table;

  clear: both;

}



body {

  font-family: 'Open Sans', sans-serif;

  color: $text-color;

  display: flex;

  height: 100vh;

  align-items: center;

  font-size: 14px;

  background: $bg-color;

  background-size: cover;

}



.container {

  position: relative;

  width: 100%;

  max-width: 280px;

  margin: 0 auto;

  &:after {

    @include clearfix;

  }

}



h1 {

  display: inline-block;

  background-color: $text-color;

  color: #fff;

  font-size: 20px;

  font-weight: normal;

  text-transform: uppercase;

  padding: 4px 20px;

  float: left;

}



.item {

  background-color: #fff;

  padding: 10px;

  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);

  border: 1px solid #FFFEFD;

  img {

    display: block;

    margin: auto;

    padding: 20px;

    width: 180px;

  }

  h2 {

    font-size: 1.1em;

    font-weight: normal;

    display: block;

    border-bottom: 1px solid #ccc;

    margin: 10px 0 10px 0;

    padding: 0 0 5px 0;

    em {

      display: block;

      line-height: 1.6;

      font-size: .8em;

    }

  }

}



.cart-button {

  float: right;

  margin: 12px 15px 0 0;

  img {

    width: 30px;

    height: 30px;

    margin: 0 auto;

    display: block;

    color: #888;

  }

  .cart-qty {

    background: #ff5252;

    border-radius: 50%;

    color: #fff;

    display: block;

    font-size: .8em;

    line-height: 17px;

    position: absolute;

    text-align: center;

    top: 11px;

    right: 10px;

    height: 17px;

    width: 17px;

  }

}



.qty-block {

  margin-top: 20px;

}



.qty {

  float: left;

  width: 80px;

  margin-right: 10px;

  user-select: none;

}



.increment,

.decrement {

  .qty_inc_dec & {

    float: left;

    text-align: center;

    width: 30px;

    cursor: pointer;

    font-size: 1.2em;

    line-height: 20px;

    height: 25px;

    vertical-align: middle;

    background-color: #fff;

    border: 1px solid #ccc;

  }

}



.increment {

  .qty_inc_dec & {

    border-bottom: 0;

    line-height: 25px;

  }

}



.qty_inc_dec {

  float: left;

  width: 10px;

  height: 50px;

  display: inline-block;

}



input[type="text"] {

  .qty & {

    float: left;

    font-family: "Open Sans", sans-serif;

    outline: 0;

    font-size: 1.2em;

    text-align: center;

    width: 50px;

    height: 50px;

    color: $text-color;

    line-height: 40px;

    border: 1px solid #ccc;

    border-right: 0;

  }

}



button[type="button"] {

  cursor: pointer;

  width: 168px;

  border: none;

  color: $text-color;

  background: #fff;

  height: 50px;

  font-size: 1.2em;

  font-family: 'Open Sans', sans-serif;

  transition: all .2s;

  border: 1px solid #ccc;

  box-shadow: 0 1px 2px #fff;

  &:hover {

    box-shadow: 0 1px 2px #cbc3ba;

  }

  &:active,

  &:focus {

    outline: none;

  }

}



.rotate-x {

  animation-duration: .6s;

  animation-name: rotate-x;

}



@keyframes rotate-x {

  from {

    transform: rotateY(0deg);

  }

  to {

    transform: rotateY(360deg);

  }

}

<div class="container-1">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty(1)">+</i>

          <i class="decrement" onclick="decrementQty(1)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container-2">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty(2)">+</i>

          <i class="decrement" onclick="decrementQty(2)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container-3">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty(3)">+</i>

          <i class="decrement" onclick="decrementQty(3)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>

answered Nov 29 '18 at 3:41

TheProvost

1,1631931

answered Nov 29 '18 at 3:41

TheProvost

1,1631931

answered Nov 29 '18 at 3:41

TheProvost

1,1631931

answered Nov 29 '18 at 3:41

TheProvost

1,1631931

this worked! thank you very much for taking the time to explain.

– gofish1234
Nov 29 '18 at 4:52

glad i could help. Please also look into the other answer. var index = .indexOf.call(increment, _this) <--- this gets the index of the current object from the "increment" selector. Useful if you dont want to create the id, but would still suggest to use my approach as it would be better to have an identifier for the item

– TheProvost
Dec 5 '18 at 2:27

add a comment |

this worked! thank you very much for taking the time to explain.

– gofish1234
Nov 29 '18 at 4:52

glad i could help. Please also look into the other answer. var index = .indexOf.call(increment, _this) <--- this gets the index of the current object from the "increment" selector. Useful if you dont want to create the id, but would still suggest to use my approach as it would be better to have an identifier for the item

– TheProvost
Dec 5 '18 at 2:27

this worked! thank you very much for taking the time to explain.

– gofish1234
Nov 29 '18 at 4:52

glad i could help. Please also look into the other answer. var index = .indexOf.call(increment, _this) <--- this gets the index of the current object from the "increment" selector. Useful if you dont want to create the id, but would still suggest to use my approach as it would be better to have an identifier for the item

– TheProvost
Dec 5 '18 at 2:27

add a comment |

document.querySelector only picks out the first matching css selector.

Therefore, you will want to use document.querySelectorAll, and attach increment/decrement handlers to each array element.

answered Nov 29 '18 at 3:03

achacttn

15127

add a comment |

document.querySelector only picks out the first matching css selector.

Therefore, you will want to use document.querySelectorAll, and attach increment/decrement handlers to each array element.

answered Nov 29 '18 at 3:03

achacttn

15127

add a comment |

document.querySelector only picks out the first matching css selector.

Therefore, you will want to use document.querySelectorAll, and attach increment/decrement handlers to each array element.

answered Nov 29 '18 at 3:03

achacttn

15127

document.querySelector only picks out the first matching css selector.

Therefore, you will want to use document.querySelectorAll, and attach increment/decrement handlers to each array element.

answered Nov 29 '18 at 3:03

achacttn

15127

answered Nov 29 '18 at 3:03

achacttn

15127

answered Nov 29 '18 at 3:03

achacttn

15127

answered Nov 29 '18 at 3:03

achacttn

15127

add a comment |

function incrementQty(_this) {

  // get All increment button

  var increment = document.querySelectorAll(".increment"); 

  // get index click button      

  var index = .indexOf.call(increment, _this)

  // get qty to index

  var value = document.querySelectorAll('input[name="qty"]')[index].value;

  // get cart-qty to index

  var cardQty = document.querySelectorAll(".cart-qty")[index];

  value = isNaN(value) ? 1 : value;

  value++;

  document.querySelectorAll('input[name="qty"]')[index].value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function decrementQty(_this) {

  var decrement = document.querySelectorAll(".decrement");

  var index = .indexOf.call(decrement, _this)

  var value = document.querySelectorAll('input[name="qty"]')[index].value;

  var cardQty = document.querySelectorAll(".cart-qty")[index];

  value = isNaN(value) ? 1 : value;

  value > 1 ? value-- : value;

  document.querySelectorAll('input[name="qty"]')[index].value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function removeAnimation(e) {

  e.target.classList.remove("rotate-x");

}



const counter = document.querySelector(".cart-qty");

counter.addEventListener("animationend", removeAnimation);

$text-color: #2a2a2a;

$bg-color: #f2eee9;

*,

*:before,

*:after {

  box-sizing: border-box;

}



@mixin clearfix {

  content: '';

  display: table;

  clear: both;

}



body {

  font-family: 'Open Sans', sans-serif;

  color: $text-color;

  display: flex;

  height: 100vh;

  align-items: center;

  font-size: 14px;

  background: $bg-color;

  background-size: cover;

}



.container {

  position: relative;

  width: 100%;

  max-width: 280px;

  margin: 0 auto;

  &:after {

    @include clearfix;

  }

}



h1 {

  display: inline-block;

  background-color: $text-color;

  color: #fff;

  font-size: 20px;

  font-weight: normal;

  text-transform: uppercase;

  padding: 4px 20px;

  float: left;

}



.item {

  background-color: #fff;

  padding: 10px;

  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);

  border: 1px solid #FFFEFD;

  img {

    display: block;

    margin: auto;

    padding: 20px;

    width: 180px;

  }

  h2 {

    font-size: 1.1em;

    font-weight: normal;

    display: block;

    border-bottom: 1px solid #ccc;

    margin: 10px 0 10px 0;

    padding: 0 0 5px 0;

    em {

      display: block;

      line-height: 1.6;

      font-size: .8em;

    }

  }

}



.cart-button {

  float: right;

  margin: 12px 15px 0 0;

  img {

    width: 30px;

    height: 30px;

    margin: 0 auto;

    display: block;

    color: #888;

  }

  .cart-qty {

    background: #ff5252;

    border-radius: 50%;

    color: #fff;

    display: block;

    font-size: .8em;

    line-height: 17px;

    position: absolute;

    text-align: center;

    top: 11px;

    right: 10px;

    height: 17px;

    width: 17px;

  }

}



.qty-block {

  margin-top: 20px;

}



.qty {

  float: left;

  width: 80px;

  margin-right: 10px;

  user-select: none;

}



.increment,

.decrement {

  .qty_inc_dec & {

    float: left;

    text-align: center;

    width: 30px;

    cursor: pointer;

    font-size: 1.2em;

    line-height: 20px;

    height: 25px;

    vertical-align: middle;

    background-color: #fff;

    border: 1px solid #ccc;

  }

}



.increment {

  .qty_inc_dec & {

    border-bottom: 0;

    line-height: 25px;

  }

}



.qty_inc_dec {

  float: left;

  width: 10px;

  height: 50px;

  display: inline-block;

}



input[type="text"] {

  .qty & {

    float: left;

    font-family: "Open Sans", sans-serif;

    outline: 0;

    font-size: 1.2em;

    text-align: center;

    width: 50px;

    height: 50px;

    color: $text-color;

    line-height: 40px;

    border: 1px solid #ccc;

    border-right: 0;

  }

}



button[type="button"] {

  cursor: pointer;

  width: 168px;

  border: none;

  color: $text-color;

  background: #fff;

  height: 50px;

  font-size: 1.2em;

  font-family: 'Open Sans', sans-serif;

  transition: all .2s;

  border: 1px solid #ccc;

  box-shadow: 0 1px 2px #fff;

  &:hover {

    box-shadow: 0 1px 2px #cbc3ba;

  }

  &:active,

  &:focus {

    outline: none;

  }

}



.rotate-x {

  animation-duration: .6s;

  animation-name: rotate-x;

}



@keyframes rotate-x {

  from {

    transform: rotateY(0deg);

  }

  to {

    transform: rotateY(360deg);

  }

}

<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <!-- incrementQty() => incrementQty(this) -->

          <i class="increment" onclick="incrementQty(this)">+</i>

          <i class="decrement" onclick="decrementQty(this)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty(this)">+</i>

          <i class="decrement" onclick="decrementQty(this)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty(this)">+</i>

          <i class="decrement" onclick="decrementQty(this)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>

edited Nov 30 '18 at 6:21

answered Nov 29 '18 at 3:25

심심이

693

Can you provide an explanation of what was changed and why?

– jhpratt
Nov 29 '18 at 3:28

add a comment |

function incrementQty(_this) {

  // get All increment button

  var increment = document.querySelectorAll(".increment"); 

  // get index click button      

  var index = .indexOf.call(increment, _this)

  // get qty to index

  var value = document.querySelectorAll('input[name="qty"]')[index].value;

  // get cart-qty to index

  var cardQty = document.querySelectorAll(".cart-qty")[index];

  value = isNaN(value) ? 1 : value;

  value++;

  document.querySelectorAll('input[name="qty"]')[index].value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function decrementQty(_this) {

  var decrement = document.querySelectorAll(".decrement");

  var index = .indexOf.call(decrement, _this)

  var value = document.querySelectorAll('input[name="qty"]')[index].value;

  var cardQty = document.querySelectorAll(".cart-qty")[index];

  value = isNaN(value) ? 1 : value;

  value > 1 ? value-- : value;

  document.querySelectorAll('input[name="qty"]')[index].value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function removeAnimation(e) {

  e.target.classList.remove("rotate-x");

}



const counter = document.querySelector(".cart-qty");

counter.addEventListener("animationend", removeAnimation);

$text-color: #2a2a2a;

$bg-color: #f2eee9;

*,

*:before,

*:after {

  box-sizing: border-box;

}



@mixin clearfix {

  content: '';

  display: table;

  clear: both;

}



body {

  font-family: 'Open Sans', sans-serif;

  color: $text-color;

  display: flex;

  height: 100vh;

  align-items: center;

  font-size: 14px;

  background: $bg-color;

  background-size: cover;

}



.container {

  position: relative;

  width: 100%;

  max-width: 280px;

  margin: 0 auto;

  &:after {

    @include clearfix;

  }

}



h1 {

  display: inline-block;

  background-color: $text-color;

  color: #fff;

  font-size: 20px;

  font-weight: normal;

  text-transform: uppercase;

  padding: 4px 20px;

  float: left;

}



.item {

  background-color: #fff;

  padding: 10px;

  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);

  border: 1px solid #FFFEFD;

  img {

    display: block;

    margin: auto;

    padding: 20px;

    width: 180px;

  }

  h2 {

    font-size: 1.1em;

    font-weight: normal;

    display: block;

    border-bottom: 1px solid #ccc;

    margin: 10px 0 10px 0;

    padding: 0 0 5px 0;

    em {

      display: block;

      line-height: 1.6;

      font-size: .8em;

    }

  }

}



.cart-button {

  float: right;

  margin: 12px 15px 0 0;

  img {

    width: 30px;

    height: 30px;

    margin: 0 auto;

    display: block;

    color: #888;

  }

  .cart-qty {

    background: #ff5252;

    border-radius: 50%;

    color: #fff;

    display: block;

    font-size: .8em;

    line-height: 17px;

    position: absolute;

    text-align: center;

    top: 11px;

    right: 10px;

    height: 17px;

    width: 17px;

  }

}



.qty-block {

  margin-top: 20px;

}



.qty {

  float: left;

  width: 80px;

  margin-right: 10px;

  user-select: none;

}



.increment,

.decrement {

  .qty_inc_dec & {

    float: left;

    text-align: center;

    width: 30px;

    cursor: pointer;

    font-size: 1.2em;

    line-height: 20px;

    height: 25px;

    vertical-align: middle;

    background-color: #fff;

    border: 1px solid #ccc;

  }

}



.increment {

  .qty_inc_dec & {

    border-bottom: 0;

    line-height: 25px;

  }

}



.qty_inc_dec {

  float: left;

  width: 10px;

  height: 50px;

  display: inline-block;

}



input[type="text"] {

  .qty & {

    float: left;

    font-family: "Open Sans", sans-serif;

    outline: 0;

    font-size: 1.2em;

    text-align: center;

    width: 50px;

    height: 50px;

    color: $text-color;

    line-height: 40px;

    border: 1px solid #ccc;

    border-right: 0;

  }

}



button[type="button"] {

  cursor: pointer;

  width: 168px;

  border: none;

  color: $text-color;

  background: #fff;

  height: 50px;

  font-size: 1.2em;

  font-family: 'Open Sans', sans-serif;

  transition: all .2s;

  border: 1px solid #ccc;

  box-shadow: 0 1px 2px #fff;

  &:hover {

    box-shadow: 0 1px 2px #cbc3ba;

  }

  &:active,

  &:focus {

    outline: none;

  }

}



.rotate-x {

  animation-duration: .6s;

  animation-name: rotate-x;

}



@keyframes rotate-x {

  from {

    transform: rotateY(0deg);

  }

  to {

    transform: rotateY(360deg);

  }

}

<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <!-- incrementQty() => incrementQty(this) -->

          <i class="increment" onclick="incrementQty(this)">+</i>

          <i class="decrement" onclick="decrementQty(this)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty(this)">+</i>

          <i class="decrement" onclick="decrementQty(this)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty(this)">+</i>

          <i class="decrement" onclick="decrementQty(this)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>

edited Nov 30 '18 at 6:21

answered Nov 29 '18 at 3:25

심심이

693

Can you provide an explanation of what was changed and why?

– jhpratt
Nov 29 '18 at 3:28

add a comment |

function incrementQty(_this) {

  // get All increment button

  var increment = document.querySelectorAll(".increment"); 

  // get index click button      

  var index = .indexOf.call(increment, _this)

  // get qty to index

  var value = document.querySelectorAll('input[name="qty"]')[index].value;

  // get cart-qty to index

  var cardQty = document.querySelectorAll(".cart-qty")[index];

  value = isNaN(value) ? 1 : value;

  value++;

  document.querySelectorAll('input[name="qty"]')[index].value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function decrementQty(_this) {

  var decrement = document.querySelectorAll(".decrement");

  var index = .indexOf.call(decrement, _this)

  var value = document.querySelectorAll('input[name="qty"]')[index].value;

  var cardQty = document.querySelectorAll(".cart-qty")[index];

  value = isNaN(value) ? 1 : value;

  value > 1 ? value-- : value;

  document.querySelectorAll('input[name="qty"]')[index].value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function removeAnimation(e) {

  e.target.classList.remove("rotate-x");

}



const counter = document.querySelector(".cart-qty");

counter.addEventListener("animationend", removeAnimation);

$text-color: #2a2a2a;

$bg-color: #f2eee9;

*,

*:before,

*:after {

  box-sizing: border-box;

}



@mixin clearfix {

  content: '';

  display: table;

  clear: both;

}



body {

  font-family: 'Open Sans', sans-serif;

  color: $text-color;

  display: flex;

  height: 100vh;

  align-items: center;

  font-size: 14px;

  background: $bg-color;

  background-size: cover;

}



.container {

  position: relative;

  width: 100%;

  max-width: 280px;

  margin: 0 auto;

  &:after {

    @include clearfix;

  }

}



h1 {

  display: inline-block;

  background-color: $text-color;

  color: #fff;

  font-size: 20px;

  font-weight: normal;

  text-transform: uppercase;

  padding: 4px 20px;

  float: left;

}



.item {

  background-color: #fff;

  padding: 10px;

  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);

  border: 1px solid #FFFEFD;

  img {

    display: block;

    margin: auto;

    padding: 20px;

    width: 180px;

  }

  h2 {

    font-size: 1.1em;

    font-weight: normal;

    display: block;

    border-bottom: 1px solid #ccc;

    margin: 10px 0 10px 0;

    padding: 0 0 5px 0;

    em {

      display: block;

      line-height: 1.6;

      font-size: .8em;

    }

  }

}



.cart-button {

  float: right;

  margin: 12px 15px 0 0;

  img {

    width: 30px;

    height: 30px;

    margin: 0 auto;

    display: block;

    color: #888;

  }

  .cart-qty {

    background: #ff5252;

    border-radius: 50%;

    color: #fff;

    display: block;

    font-size: .8em;

    line-height: 17px;

    position: absolute;

    text-align: center;

    top: 11px;

    right: 10px;

    height: 17px;

    width: 17px;

  }

}



.qty-block {

  margin-top: 20px;

}



.qty {

  float: left;

  width: 80px;

  margin-right: 10px;

  user-select: none;

}



.increment,

.decrement {

  .qty_inc_dec & {

    float: left;

    text-align: center;

    width: 30px;

    cursor: pointer;

    font-size: 1.2em;

    line-height: 20px;

    height: 25px;

    vertical-align: middle;

    background-color: #fff;

    border: 1px solid #ccc;

  }

}



.increment {

  .qty_inc_dec & {

    border-bottom: 0;

    line-height: 25px;

  }

}



.qty_inc_dec {

  float: left;

  width: 10px;

  height: 50px;

  display: inline-block;

}



input[type="text"] {

  .qty & {

    float: left;

    font-family: "Open Sans", sans-serif;

    outline: 0;

    font-size: 1.2em;

    text-align: center;

    width: 50px;

    height: 50px;

    color: $text-color;

    line-height: 40px;

    border: 1px solid #ccc;

    border-right: 0;

  }

}



button[type="button"] {

  cursor: pointer;

  width: 168px;

  border: none;

  color: $text-color;

  background: #fff;

  height: 50px;

  font-size: 1.2em;

  font-family: 'Open Sans', sans-serif;

  transition: all .2s;

  border: 1px solid #ccc;

  box-shadow: 0 1px 2px #fff;

  &:hover {

    box-shadow: 0 1px 2px #cbc3ba;

  }

  &:active,

  &:focus {

    outline: none;

  }

}



.rotate-x {

  animation-duration: .6s;

  animation-name: rotate-x;

}



@keyframes rotate-x {

  from {

    transform: rotateY(0deg);

  }

  to {

    transform: rotateY(360deg);

  }

}

<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <!-- incrementQty() => incrementQty(this) -->

          <i class="increment" onclick="incrementQty(this)">+</i>

          <i class="decrement" onclick="decrementQty(this)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty(this)">+</i>

          <i class="decrement" onclick="decrementQty(this)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty(this)">+</i>

          <i class="decrement" onclick="decrementQty(this)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>

edited Nov 30 '18 at 6:21

answered Nov 29 '18 at 3:25

심심이

693

function incrementQty(_this) {

  // get All increment button

  var increment = document.querySelectorAll(".increment"); 

  // get index click button      

  var index = .indexOf.call(increment, _this)

  // get qty to index

  var value = document.querySelectorAll('input[name="qty"]')[index].value;

  // get cart-qty to index

  var cardQty = document.querySelectorAll(".cart-qty")[index];

  value = isNaN(value) ? 1 : value;

  value++;

  document.querySelectorAll('input[name="qty"]')[index].value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function decrementQty(_this) {

  var decrement = document.querySelectorAll(".decrement");

  var index = .indexOf.call(decrement, _this)

  var value = document.querySelectorAll('input[name="qty"]')[index].value;

  var cardQty = document.querySelectorAll(".cart-qty")[index];

  value = isNaN(value) ? 1 : value;

  value > 1 ? value-- : value;

  document.querySelectorAll('input[name="qty"]')[index].value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function removeAnimation(e) {

  e.target.classList.remove("rotate-x");

}



const counter = document.querySelector(".cart-qty");

counter.addEventListener("animationend", removeAnimation);

$text-color: #2a2a2a;

$bg-color: #f2eee9;

*,

*:before,

*:after {

  box-sizing: border-box;

}



@mixin clearfix {

  content: '';

  display: table;

  clear: both;

}



body {

  font-family: 'Open Sans', sans-serif;

  color: $text-color;

  display: flex;

  height: 100vh;

  align-items: center;

  font-size: 14px;

  background: $bg-color;

  background-size: cover;

}



.container {

  position: relative;

  width: 100%;

  max-width: 280px;

  margin: 0 auto;

  &:after {

    @include clearfix;

  }

}



h1 {

  display: inline-block;

  background-color: $text-color;

  color: #fff;

  font-size: 20px;

  font-weight: normal;

  text-transform: uppercase;

  padding: 4px 20px;

  float: left;

}



.item {

  background-color: #fff;

  padding: 10px;

  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);

  border: 1px solid #FFFEFD;

  img {

    display: block;

    margin: auto;

    padding: 20px;

    width: 180px;

  }

  h2 {

    font-size: 1.1em;

    font-weight: normal;

    display: block;

    border-bottom: 1px solid #ccc;

    margin: 10px 0 10px 0;

    padding: 0 0 5px 0;

    em {

      display: block;

      line-height: 1.6;

      font-size: .8em;

    }

  }

}



.cart-button {

  float: right;

  margin: 12px 15px 0 0;

  img {

    width: 30px;

    height: 30px;

    margin: 0 auto;

    display: block;

    color: #888;

  }

  .cart-qty {

    background: #ff5252;

    border-radius: 50%;

    color: #fff;

    display: block;

    font-size: .8em;

    line-height: 17px;

    position: absolute;

    text-align: center;

    top: 11px;

    right: 10px;

    height: 17px;

    width: 17px;

  }

}



.qty-block {

  margin-top: 20px;

}



.qty {

  float: left;

  width: 80px;

  margin-right: 10px;

  user-select: none;

}



.increment,

.decrement {

  .qty_inc_dec & {

    float: left;

    text-align: center;

    width: 30px;

    cursor: pointer;

    font-size: 1.2em;

    line-height: 20px;

    height: 25px;

    vertical-align: middle;

    background-color: #fff;

    border: 1px solid #ccc;

  }

}



.increment {

  .qty_inc_dec & {

    border-bottom: 0;

    line-height: 25px;

  }

}



.qty_inc_dec {

  float: left;

  width: 10px;

  height: 50px;

  display: inline-block;

}



input[type="text"] {

  .qty & {

    float: left;

    font-family: "Open Sans", sans-serif;

    outline: 0;

    font-size: 1.2em;

    text-align: center;

    width: 50px;

    height: 50px;

    color: $text-color;

    line-height: 40px;

    border: 1px solid #ccc;

    border-right: 0;

  }

}



button[type="button"] {

  cursor: pointer;

  width: 168px;

  border: none;

  color: $text-color;

  background: #fff;

  height: 50px;

  font-size: 1.2em;

  font-family: 'Open Sans', sans-serif;

  transition: all .2s;

  border: 1px solid #ccc;

  box-shadow: 0 1px 2px #fff;

  &:hover {

    box-shadow: 0 1px 2px #cbc3ba;

  }

  &:active,

  &:focus {

    outline: none;

  }

}



.rotate-x {

  animation-duration: .6s;

  animation-name: rotate-x;

}



@keyframes rotate-x {

  from {

    transform: rotateY(0deg);

  }

  to {

    transform: rotateY(360deg);

  }

}

<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <!-- incrementQty() => incrementQty(this) -->

          <i class="increment" onclick="incrementQty(this)">+</i>

          <i class="decrement" onclick="decrementQty(this)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty(this)">+</i>

          <i class="decrement" onclick="decrementQty(this)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty(this)">+</i>

          <i class="decrement" onclick="decrementQty(this)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>

function incrementQty(_this) {

  // get All increment button

  var increment = document.querySelectorAll(".increment"); 

  // get index click button      

  var index = .indexOf.call(increment, _this)

  // get qty to index

  var value = document.querySelectorAll('input[name="qty"]')[index].value;

  // get cart-qty to index

  var cardQty = document.querySelectorAll(".cart-qty")[index];

  value = isNaN(value) ? 1 : value;

  value++;

  document.querySelectorAll('input[name="qty"]')[index].value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function decrementQty(_this) {

  var decrement = document.querySelectorAll(".decrement");

  var index = .indexOf.call(decrement, _this)

  var value = document.querySelectorAll('input[name="qty"]')[index].value;

  var cardQty = document.querySelectorAll(".cart-qty")[index];

  value = isNaN(value) ? 1 : value;

  value > 1 ? value-- : value;

  document.querySelectorAll('input[name="qty"]')[index].value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function removeAnimation(e) {

  e.target.classList.remove("rotate-x");

}



const counter = document.querySelector(".cart-qty");

counter.addEventListener("animationend", removeAnimation);

$text-color: #2a2a2a;

$bg-color: #f2eee9;

*,

*:before,

*:after {

  box-sizing: border-box;

}



@mixin clearfix {

  content: '';

  display: table;

  clear: both;

}



body {

  font-family: 'Open Sans', sans-serif;

  color: $text-color;

  display: flex;

  height: 100vh;

  align-items: center;

  font-size: 14px;

  background: $bg-color;

  background-size: cover;

}



.container {

  position: relative;

  width: 100%;

  max-width: 280px;

  margin: 0 auto;

  &:after {

    @include clearfix;

  }

}



h1 {

  display: inline-block;

  background-color: $text-color;

  color: #fff;

  font-size: 20px;

  font-weight: normal;

  text-transform: uppercase;

  padding: 4px 20px;

  float: left;

}



.item {

  background-color: #fff;

  padding: 10px;

  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);

  border: 1px solid #FFFEFD;

  img {

    display: block;

    margin: auto;

    padding: 20px;

    width: 180px;

  }

  h2 {

    font-size: 1.1em;

    font-weight: normal;

    display: block;

    border-bottom: 1px solid #ccc;

    margin: 10px 0 10px 0;

    padding: 0 0 5px 0;

    em {

      display: block;

      line-height: 1.6;

      font-size: .8em;

    }

  }

}



.cart-button {

  float: right;

  margin: 12px 15px 0 0;

  img {

    width: 30px;

    height: 30px;

    margin: 0 auto;

    display: block;

    color: #888;

  }

  .cart-qty {

    background: #ff5252;

    border-radius: 50%;

    color: #fff;

    display: block;

    font-size: .8em;

    line-height: 17px;

    position: absolute;

    text-align: center;

    top: 11px;

    right: 10px;

    height: 17px;

    width: 17px;

  }

}



.qty-block {

  margin-top: 20px;

}



.qty {

  float: left;

  width: 80px;

  margin-right: 10px;

  user-select: none;

}



.increment,

.decrement {

  .qty_inc_dec & {

    float: left;

    text-align: center;

    width: 30px;

    cursor: pointer;

    font-size: 1.2em;

    line-height: 20px;

    height: 25px;

    vertical-align: middle;

    background-color: #fff;

    border: 1px solid #ccc;

  }

}



.increment {

  .qty_inc_dec & {

    border-bottom: 0;

    line-height: 25px;

  }

}



.qty_inc_dec {

  float: left;

  width: 10px;

  height: 50px;

  display: inline-block;

}



input[type="text"] {

  .qty & {

    float: left;

    font-family: "Open Sans", sans-serif;

    outline: 0;

    font-size: 1.2em;

    text-align: center;

    width: 50px;

    height: 50px;

    color: $text-color;

    line-height: 40px;

    border: 1px solid #ccc;

    border-right: 0;

  }

}



button[type="button"] {

  cursor: pointer;

  width: 168px;

  border: none;

  color: $text-color;

  background: #fff;

  height: 50px;

  font-size: 1.2em;

  font-family: 'Open Sans', sans-serif;

  transition: all .2s;

  border: 1px solid #ccc;

  box-shadow: 0 1px 2px #fff;

  &:hover {

    box-shadow: 0 1px 2px #cbc3ba;

  }

  &:active,

  &:focus {

    outline: none;

  }

}



.rotate-x {

  animation-duration: .6s;

  animation-name: rotate-x;

}



@keyframes rotate-x {

  from {

    transform: rotateY(0deg);

  }

  to {

    transform: rotateY(360deg);

  }

}

<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <!-- incrementQty() => incrementQty(this) -->

          <i class="increment" onclick="incrementQty(this)">+</i>

          <i class="decrement" onclick="decrementQty(this)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty(this)">+</i>

          <i class="decrement" onclick="decrementQty(this)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty(this)">+</i>

          <i class="decrement" onclick="decrementQty(this)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>

function incrementQty(_this) {

  // get All increment button

  var increment = document.querySelectorAll(".increment"); 

  // get index click button      

  var index = .indexOf.call(increment, _this)

  // get qty to index

  var value = document.querySelectorAll('input[name="qty"]')[index].value;

  // get cart-qty to index

  var cardQty = document.querySelectorAll(".cart-qty")[index];

  value = isNaN(value) ? 1 : value;

  value++;

  document.querySelectorAll('input[name="qty"]')[index].value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function decrementQty(_this) {

  var decrement = document.querySelectorAll(".decrement");

  var index = .indexOf.call(decrement, _this)

  var value = document.querySelectorAll('input[name="qty"]')[index].value;

  var cardQty = document.querySelectorAll(".cart-qty")[index];

  value = isNaN(value) ? 1 : value;

  value > 1 ? value-- : value;

  document.querySelectorAll('input[name="qty"]')[index].value = value;

  cardQty.innerHTML = value;

  cardQty.classList.add("rotate-x");

}



function removeAnimation(e) {

  e.target.classList.remove("rotate-x");

}



const counter = document.querySelector(".cart-qty");

counter.addEventListener("animationend", removeAnimation);

$text-color: #2a2a2a;

$bg-color: #f2eee9;

*,

*:before,

*:after {

  box-sizing: border-box;

}



@mixin clearfix {

  content: '';

  display: table;

  clear: both;

}



body {

  font-family: 'Open Sans', sans-serif;

  color: $text-color;

  display: flex;

  height: 100vh;

  align-items: center;

  font-size: 14px;

  background: $bg-color;

  background-size: cover;

}



.container {

  position: relative;

  width: 100%;

  max-width: 280px;

  margin: 0 auto;

  &:after {

    @include clearfix;

  }

}



h1 {

  display: inline-block;

  background-color: $text-color;

  color: #fff;

  font-size: 20px;

  font-weight: normal;

  text-transform: uppercase;

  padding: 4px 20px;

  float: left;

}



.item {

  background-color: #fff;

  padding: 10px;

  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);

  border: 1px solid #FFFEFD;

  img {

    display: block;

    margin: auto;

    padding: 20px;

    width: 180px;

  }

  h2 {

    font-size: 1.1em;

    font-weight: normal;

    display: block;

    border-bottom: 1px solid #ccc;

    margin: 10px 0 10px 0;

    padding: 0 0 5px 0;

    em {

      display: block;

      line-height: 1.6;

      font-size: .8em;

    }

  }

}



.cart-button {

  float: right;

  margin: 12px 15px 0 0;

  img {

    width: 30px;

    height: 30px;

    margin: 0 auto;

    display: block;

    color: #888;

  }

  .cart-qty {

    background: #ff5252;

    border-radius: 50%;

    color: #fff;

    display: block;

    font-size: .8em;

    line-height: 17px;

    position: absolute;

    text-align: center;

    top: 11px;

    right: 10px;

    height: 17px;

    width: 17px;

  }

}



.qty-block {

  margin-top: 20px;

}



.qty {

  float: left;

  width: 80px;

  margin-right: 10px;

  user-select: none;

}



.increment,

.decrement {

  .qty_inc_dec & {

    float: left;

    text-align: center;

    width: 30px;

    cursor: pointer;

    font-size: 1.2em;

    line-height: 20px;

    height: 25px;

    vertical-align: middle;

    background-color: #fff;

    border: 1px solid #ccc;

  }

}



.increment {

  .qty_inc_dec & {

    border-bottom: 0;

    line-height: 25px;

  }

}



.qty_inc_dec {

  float: left;

  width: 10px;

  height: 50px;

  display: inline-block;

}



input[type="text"] {

  .qty & {

    float: left;

    font-family: "Open Sans", sans-serif;

    outline: 0;

    font-size: 1.2em;

    text-align: center;

    width: 50px;

    height: 50px;

    color: $text-color;

    line-height: 40px;

    border: 1px solid #ccc;

    border-right: 0;

  }

}



button[type="button"] {

  cursor: pointer;

  width: 168px;

  border: none;

  color: $text-color;

  background: #fff;

  height: 50px;

  font-size: 1.2em;

  font-family: 'Open Sans', sans-serif;

  transition: all .2s;

  border: 1px solid #ccc;

  box-shadow: 0 1px 2px #fff;

  &:hover {

    box-shadow: 0 1px 2px #cbc3ba;

  }

  &:active,

  &:focus {

    outline: none;

  }

}



.rotate-x {

  animation-duration: .6s;

  animation-name: rotate-x;

}



@keyframes rotate-x {

  from {

    transform: rotateY(0deg);

  }

  to {

    transform: rotateY(360deg);

  }

}

<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <!-- incrementQty() => incrementQty(this) -->

          <i class="increment" onclick="incrementQty(this)">+</i>

          <i class="decrement" onclick="decrementQty(this)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty(this)">+</i>

          <i class="decrement" onclick="decrementQty(this)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>



<div class="container">

  <h1>Holiday <strong>Deals</strong></h1>

  <div class="cart-button">

    <img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">

    <span class="cart-qty">1</span> </div>

  <div class="item">

    <img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">

    <h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>

    <p>Price: <em>$439.12</em></p>

    <div class="qty-block">

      <div class="qty">

        <input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />

        <div class="qty_inc_dec">

          <i class="increment" onclick="incrementQty(this)">+</i>

          <i class="decrement" onclick="decrementQty(this)">-</i>

        </div>

      </div>

      <button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>

    </div>

  </div>

</div>

edited Nov 30 '18 at 6:21

answered Nov 29 '18 at 3:25

심심이

693

edited Nov 30 '18 at 6:21

answered Nov 29 '18 at 3:25

심심이

693

answered Nov 29 '18 at 3:25

심심이

693

answered Nov 29 '18 at 3:25

심심이

693

Can you provide an explanation of what was changed and why?

– jhpratt
Nov 29 '18 at 3:28

add a comment |

Can you provide an explanation of what was changed and why?

– jhpratt
Nov 29 '18 at 3:28

Can you provide an explanation of what was changed and why?

– jhpratt
Nov 29 '18 at 3:28

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Btukfyl