Добавить конкретные элементы в корзину по клику - PullRequest
Новая
       7

Добавить конкретные элементы в корзину по клику

0 голосов
/ 22 декабря 2018

Я хочу, чтобы корзина добавила элемент, к которому относится кнопка 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)
}

Спасибо

1 Ответ

0 голосов
/ 22 декабря 2018

Вот пример, где мы используем data- атрибуты в HTML.Чтобы помочь нам, когда мы загружаем корзину. 

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>
...