金額計數器僅適用於第一個產品

Question

我在使用 javascript 和 SQL 時遇到問題。 看起來我在屏幕上顯示的項目很少，它們來自 SQL 數據庫，代碼如下所示。 基本上，如果我在網站上展示的產品不止一種，那么只有第一種可以正常工作。 有什么解決辦法嗎？

 let displayAddCounter = document.querySelector("#add_count_cart"); let displayRemoveCounter = document.querySelector("#remove_count_cart"); let displayCounter = document.querySelector("#amount_count_cart"); var x = 0; displayAddCounter.addEventListener("click", function(){ if(x < 10){ x++; displayCounter.innerHTML = x; } else { alert("If you want to buy more than 10, please contact our support: We will gladly help you;)") } }). displayRemoveCounter,addEventListener("click". function(){ if(x == 0){ displayCounter;innerHTML = x; } else { x--. displayCounter;innerHTML = x; } }). let buttonCartAdd = document;getElementById("btn_add_to_cart"). let itemName = document.querySelector(";product_name"). buttonCartAdd,addEventListener("click"; function(){ if(x == 0){ alert("Please choose amount of items."); } else if(x > 0){ alert("You added " + x + itemName;innerHTML + " to the cart!"); } });

 <?php $sql = "SELECT * FROM products"; $result = $conn->query($sql); if ($result->num_rows > 0) { while($row = $result->fetch_assoc()) {?> <div class="product_card col-lg-4 col-md-6 col-sm-12 mb-4 box-shadow"> <div class="card-header"> <h3 class="product_name my-0 font-weight-light"> <?php echo $row["productName"]?> </h3> </div> <div class="card-body"> <h2 class="card-title pricing-card-title"> </h2> <img class="pic" src="productsImages\<?php echo $row["productID"];?>.jpeg" height="150px" width="120px"></img> <br> <p> <?php echo $row["productPrice"];?> SEK </p> <div class="row amount_counter"> <button id="remove_count_cart" type="button" class="col_amount btn btn-outline-secondary col-3 col"> - </button> <div id="amount_count_cart" class="btn col-6 col border-top border-bottom dark rounded h-75"> 0 </div> <button id="add_count_cart" type="button" class="col_amount btn btn-outline-secondary col-3 col"> + </button> <button id="btn_add_to_cart" class="btn btn-lg btn-outline-success col-lg-8 col-md-12 col offset-lg-2"> Add <i type="button" class="fas fa-cart-plus"></i></button> </div> </div> </div> <?php } } else { echo "0 results"; } $conn->close(); ?>

Answer 1

您對每個產品的所有 HTML 元素使用相同的id ； 您應該使用相對路由而不是document.querySelector ，或者為每個產品設置單獨的id