Есть массив products, в котором хранятся все товары
let products = [
{id: 0, name: 'Футболка 1', img: "https://clck.ru/Smwci", category: 'Футболки', price: 2500},
{id: 1, name: 'Футболка 2', img: "https://clck.ru/Smwee", category: 'Футболки', price: 2500},
{id: 2, name: 'Футболка 3', img: "https://clck.ru/Smwg4", category: 'Футболки', price: 2500},
{id: 3, name: 'Футболка 4', img: "https://clck.ru/Smwhs", category: 'Футболки', price: 2500},
{id: 4, name: 'Комплект 1', img: "https://clck.ru/Smwit", category: 'Комплекты', price: 3500},
{id: 5, name: 'Комплект 2', img: "https://clck.ru/Smwjd", category: 'Комплекты', price: 3500}
]
Из него добавляются объекты в массив cart
Но когда я удаляю какой-то товар, удаляется не тот, на который я нажимаю
Или сразу несколько
Вот сам скрипт
let catalog = document.querySelector('#catalog');
let btnView = document.querySelector('#btnView');
let modal = document.querySelector('#modal');
let cartLink = document.querySelector('#cartLink');
let modalClose = document.querySelector('#modalClose');
let cart = [];
let toCart = document.querySelector('#toCart');
let btnToCart = document.querySelector('.btnToCart');
let cartProducts = document.querySelector('#cartProducts');
let deleteProducts = document.querySelector('#deleteProducts');
// Каталог. Отображение товаров
products.forEach((i) => {
catalog.innerHTML += `
<div class="card">
<h3>${i.name}</h3>
<img src="${i.img}">
<p>₽ ${i.price}</p>
<button id="${i.id}" class="btnToCart" onclick = "addToCart(id)">Добавить в корзину</button>
</div>
`;
});
// Модальное окно корзины
function renderCart() {
if(cart.length === 0) {
cartProducts.innerHTML = `
<li> Ничего не добавлено <li/>
`;
deleteProducts.disabled = true;
} else {
cartProducts.innerHTML = '';
cart.forEach((i) => {
cartProducts.innerHTML += `
<li class="modal__window_product">
<img class="modal__window_img" src="${i.img}">
<div class="modal__window_description">
<span><b>${i.name}</b></span>
<span>${i.price} ₽</span>
</div>
<button id="${i.id}" class="modal__window_btn"
onclick = "removeFromCart(id)">
✖</button>
</li>
`;
});
deleteProducts.disabled = false;
};
};
cartLink.addEventListener('click', () => {
modal.style.display = 'flex';
});
modalClose.addEventListener('click', () => {
modal.style.display = 'none';
});
// Добавление товаров в корзину
function addToCart(id) {
cart.push(products[id]);
console.log(cart);
renderCart();
};
// Удаление товара из корзины
function removeFromCart(id) {
cart.splice(cart[id], 1);
renderCart();
console.log(cart);
};
// Очистить корзину
deleteProducts.addEventListener('click', ()=> {
cart = [];
renderCart();
});
И html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<header>
<nav class="menu">
<div class="menu__categories">
<button class="allCategories" id="btnAllProducts">Все товары</button>
<button class="tshorts" id="btnTshort">Футболки</button>
<button class="complects" id="btnComplect">Комплекты</button>
</div>
<button class="cartLink" id="cartLink">Корзина</button>
</nav>
</header>
<main>
<div id="catalog" class="catalog"></div>
</main>
</div>
<div class="modal" id="modal">
<div class="modal__window">
<p class="modal__window_close" id="modalClose">✕</p>
<div class="modal__window_container">
<h2 class="modal__window_title">Корзина</h2>
<ul id="cartProducts" class="modal__window_cart">
</ul>
<button disabled=true id="deleteProducts">Очистить корзину</button>
</div>
</div>
</div>
<script src="products.js"></script>
<script src="script.js"></script>
</body>
</html>
