Удалить товар из корзиныCSS

Разбираемся в CSS
Ответить Пред. темаСлед. тема
Anonymous
 Удалить товар из корзины

Сообщение Anonymous »

Я хочу реализовать функцию удаления элементов из корзины кулинарного веб-сайта, который я создал с использованием HTML, CSS и JavaScript. Но это не работает. Значок для удаления отсутствует.
Я добавил эту часть для удаления и обновления корзины
js-код:

Код: Выделить всё

// Modify the updateCartDisplay function in cart.js
`const updateCartDisplay = function() {
const cartBody = document.querySelector(".items");
cartBody.innerHTML = '';
let cartItems = localStorage.getItem('cartItems');
cartItems = cartItems? JSON.parse(cartItems) : [];

cartItems.forEach(item => {
const cartRow = document.createElement("tr");
const cartItemName = document.createElement("td");
const cartItemPrice = document.createElement("td");
const deleteButton = document.createElement("td");
const deleteIcon = document.createElement("i");
deleteIcon.classList.add("fa", "fa-trash");
deleteButton.appendChild(deleteIcon);
deleteButton.addEventListener("click", () => deleteItemFromCart(item.name));

cartItemName.innerText = item.name;
cartItemPrice.innerText = item.price;
cartItemPrice.classList.add("price");
cartRow.appendChild(cartItemName);
cartRow.appendChild(cartItemPrice);
cartRow.appendChild(deleteButton);
cartBody.appendChild(cartRow);
});
}

const deleteItemFromCart = function(name) {
let cartItems = localStorage.getItem('cartItems');
cartItems = cartItems? JSON.parse(cartItems) : [];
cartItems = cartItems.filter(item => item.name!== name);
localStorage.setItem('cartItems', JSON.stringify(cartItems));
updateCartDisplay();
calculateBill();
}

// calculate total bill amount
const calculateBill = ()=>{
let total = 0;
itemPrices = document.querySelectorAll(".price");
for (p of itemPrices){
if (p!=null){
console.log(p.innerText);
total += parseFloat(p.innerText.replace('$',''));
}
}

console.log(total);
if(total!=0 && !isNaN(total)){
document.getElementById("bill").innerText = "$" + total.toFixed(2)
}

}

document.addEventListener('DOMContentLoaded', function () {
addItemToCart();
});

let orderBtn = document.querySelector(".butt");
orderBtn.addEventListener("click", ()=>{
alert("Order placed!");
})`
Шрифт Awesome также включен в html-файл. Я хочу добавить эту функцию, чтобы добавить значок удаления рядом с каждым элементом, и при нажатии на него элемент удаляется из корзины, а общая стоимость корзины изменяется.

Подробнее здесь: https://stackoverflow.com/questions/784 ... -from-cart
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «CSS»