我如何才能使此javascript正常运行？

Question

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> 

Answer 1

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.

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

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

3. change query selector to get container parent in the query selector clause eg 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> 

Answer 2

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.

Answer 3

 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>