Всем привет, по ходу разработки функционала у меня возникло 2 вопроса. В данной работе по клику на кнопку "Добавить авто в корзину" добавляются карточки с актуальными введенными данными в корзину. Так же присутствует кнопка "Добавить транспорт", по клику которой добавляются дополнительный блок с инпутом и селектом для более гибкого ввода данных в корзину.
https://jsfiddle.net/vnwo28ue/47/
https://codepen.io/Andy41/pen/OJwqpXE?editors=1111
Вопрос заключается в том, что на 42 строке имеется переменная
let limitCar = 2, которая подразумевает макс количество автомобилей
вообще которое является пределом и на 44 строке мне нужно сравнить общую сумму автомобилей + количество автомобилей в одной карточке с limitCar такого вида:
if (amountSum + dataCars.carAmount > limitCar) {}
Сравнивается и работает вроде правильно, но если допустим выбрать при
let limitCar = 2 в первом селекте 1 авто а во втором 2, то отработает if с предупреждением что общая сумма больше чем лимит и затем отработает else с добавлением карточки в корзину у которой количество было выбрано 1. Как можно это исправить? Может дело в
amountSum?
И второй вопрос, на 89 строке я очищаю все карточки автомобилей из корзины и хранилища, но после повторного добавления авто в корзину возвращаются удаленные карточки. Я понимаю что это как то связано с глобальным getItem, но исправить не получается.
<div class="block">
<div class="parent">
<div class="child">
<input type="text" class="model" placeholder="Введите модель авто">
<select class="amount">
<option value="" disabled selected>Количество</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button class="add">Добавить транспорт</button>
</div>
</div>
<button class="btn">Добавить авто в корзину</button>
</div>
<button class="delete-all" style="background: #e75757;">Удалить все авто из корзины</button>
<div class="cart">
<span class="cart-title">Корзина</span>
<div class="info"></div>
</div>
const parent = document.querySelector(".block");
const info = document.querySelector(".info");
LSKeyCars = "cars";
let getCars = JSON.parse(localStorage.getItem(LSKeyCars) || "[]");
let amountSum = getCars.reduce( //общая сумма авто (считаю для условия if на 44 строке)
(acc, curr) => acc + curr.carAmount,
0
);
console.log('amountSum before click: ', amountSum)
const renderCars = () => {
info.innerHTML = getCars
.map(
(car) =>
`<div class="item" id="${car.id}">
<div class="title">ЛИЧНЫЙ ТРАНСПОРТ</div>
<div>Модель авто: ${car.carModel}</div>
<div>Количество авто: ${car.carAmount}</div>
</div>`
)
.join("");
};
renderCars();
let dataCars; //объект с пользов. данными в глобальной обл. видимости
parent.addEventListener("click", function() { //отрендерить данные из LS
const childArr = [...document.querySelectorAll(".child")];
if (e.target.classList.contains("btn")) {
childArr.map(item => { // перебираю все карточки в корзине
const amount = +item.querySelector(".amount").value;
const model = item.querySelector(".model").value;
dataCars = { //объект с пользов. данными
id: Math.floor(Math.random() * 100),
carModel: model,
carAmount: amount,
};
let limitCar = 2 //максимальный лимит количества автомобилей
// если общая сумма + количество из 1 карточки > лимита то не рендерить
if (amountSum + dataCars.carAmount > limitCar) {
alert(
"Количество автомобилей превышает количество взрослых"
);
} else {
getCars.push(dataCars);
localStorage.setItem("cars", JSON.stringify(getCars));
renderCars();
let sumCar = getCars.reduce( // общая сумма авто при клике
(acc, curr) => acc + curr.carAmount,
0
);
amountSum = sumCar;
console.log('amountSum after click: ', amountSum)
}
})
}
});
//add select car
const add = document.querySelector(".add");
const child = document.querySelector('.child')
add.addEventListener("click", function() {
child.insertAdjacentHTML(
"afterend",
`<div class="child">
<input type="text" class="model" placeholder="Введите модель авто">
<select class="amount">
<option value="" disabled selected>Количество</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<span class="remove">X<span>
</div>`)
})
const remove = document.querySelector('.remove')
parent.addEventListener('click', function(e) {
if (e.target.classList.contains("remove")) {
e.target.parentNode.remove()
}
});
//полностью очистить корзину(конкретно items автомобилей)
const allRemove = document.querySelector('.delete-all')
allRemove.addEventListener('click', function() {
//пытаюсь получить актуальный state массива
const currentCars = JSON.parse(localStorage.getItem("cars") || "[]");
const info = document.querySelector(".info");
if (currentCars) {
localStorage.removeItem("cars");
while (info.firstChild) {
info.removeChild(info.firstChild);
let sumCar = getCars.reduce( // общая сумма не пересчитывается
(acc, curr) => acc + curr.carAmount,
0
);
amountSum = sumCar;
console.log('amountSum allDelete click: ', amountSum)
}
}
})
