单击将特定项目添加到购物车

Question

我想让购物车添加与 Add to cart 按钮相关的项目。您能否也解释一下它不起作用的原因。目前它只添加第一个产品。这是 HTML:

<p class="name">Playstation 4 console (Black)</p>
<p class="pricetitle">Price: <span id="price">1899</span> AED</p>
<form>
    <button type="button" onclick="addToCart()">Add to cart</button>
</form>

<p class="name">Xbox one console (Black)</p>
<p class="pricetitle">Price: <span id="price">1800</span> AED</p>
<form>
    <button type="button" onclick="addToCart()">Add to cart</button>
</form>

这里是 JavaScript：

const name = document.querySelectorAll(".name");
const price = document.querySelectorAll("#price");
const button = document.querySelectorAll("button");
const cart = []
const addToCart = () => {
    for (var i = 0; i < 1; i++) {
        cart.push(name[i].innerText)
        cart.push(parseInt(price[i].innerText))
    }
    console.log(cart)
}

谢谢

Answer 1

这是一个示例，我们在 html 中使用 data- 属性。在我们装车时帮助我们。

let buttons = document.getElementsByTagName("button");

const cart = [];

for(var i=0; i<buttons.length; i++) {
  let button = buttons[i];
  console.log(button);
  button.addEventListener('click', function(event){
    console.clear();
    console.log(event.target);
    console.log(event.target.dataset.productSku);
    cart.push( event.target.dataset.productSku );
    console.log(cart)    
  });
}

<p class="name">Playstation 4 console (Black)</p>
<p class="pricetitle">Price: <span id="price">1899</span> AED</p>
<button data-product-sku="ps4black">Add to cart</button>


<p class="name">Xbox one console (Black)</p>
<p class="pricetitle">Price: <span id="price">1800</span> AED</p>
<button data-product-sku="xboxoneblack">Add to cart</button>

<div id="cart"></div>

单击将特定项目添加到购物车

Add specific items to cart on click

html

javascript

cart