Я хочу рассчитать общую сумму (сумму) всех покупок, используя «+», «-» для добавления и удаления товаров из корзины покупок. В левом верхнем углу должна отображаться сумма «итого»: ". Перед каждым товаром отображается общая сумма покупки за одну покупку.
Здесь описательное изображение
Здесь HTML-код:
<body>
<div class="shopping-cart">
<!-- Title -->
<div class="title">
Shopping Bag total :
</div>
<!-- Product #1 -->
<div class="item">
<div class="buttons">
<span class="delete-btn"></span>
<span class="like-btn"></span>
</div>
<div class="image">
<img src="item-1.png" alt="" />
</div>
<div class="description">
<span>Common Projects</span>
<span>Bball High</span>
<span>White</span>
</div>
<div class="quantity">
<button class="plus-btn" type="button" name="button"><img src="plus.svg" alt="" /></button>
<input type="text" value="0" class="input-btn" />
<button class="minus-btn" type="button" name="button"><img src="minus.svg" alt="" /></button>
</div>
<div class="total-price" id="549"><input type="number" value="0" class="result-btn" /></div>
</div>
<!-- Product #2 -->
<div class="item">
<div class="buttons">
<span class="delete-btn"></span>
<span class="like-btn"></span>
</div>
<div class="image">
<img src="item-2.png" alt=""/>
</div>
<div class="description">
<span>Maison Margiela</span>
<span>Future Sneakers</span>
<span>White</span>
</div>
<div class="quantity">
<button class="plus-btn" type="button" name="button"><img src="plus.svg" alt="" /></button>
<input type="text" value="0" class="input-btn" />
<button class="minus-btn" type="button" name="button"><img src="minus.svg" alt="" /></button>
</div>
<div class="total-price" id="270"><input type="number" value="0" class="result-btn" /></div>
</div>
<!-- Product #3 -->
<div class="item">
<div class="buttons">
<span class="delete-btn"></span>
<span class="like-btn"></span>
</div>
<div class="image">
<img src="item-3.png" alt="" />
</div>
<div class="description">
<span>Our Legacy</span>
<span>Brushed Scarf</span>
<span>Brown</span>
</div>
<div class="quantity">
<button class="plus-btn" type="button" name="button"><img src="plus.svg" alt="" /></button>
<input type="text" value="0" class="input-btn" />
<button class="minus-btn" type="button" name="button"><img src="minus.svg" alt="" /></button>
</div>
<div class="total-price" id="349"><input type="number" value="0" class="result-btn" /></div>
</div>
</div>
</body>
Вот код JS:
const items = document.querySelectorAll('.item');
items.forEach(function(item) {
const minusButton = item.querySelector('.minus-btn');
const plusButton = item.querySelector('.plus-btn');
const inputField = item.querySelector('.input-btn');
const resultField = item.querySelector('.result-btn');
minusButton.addEventListener('click', function minusProduct() {
const currentValue = Number(inputField.value);
if (currentValue > 0) {
inputField.value = currentValue - 1;
var x = item.querySelector('.total-price').id;
resultField = item.querySelector('.result-btn').value = x* inputField.value;
} else inputField.value = 0
});
plusButton.addEventListener('click', function plusProduct() {
const currentValue = Number(inputField.value);
if (currentValue < 100) {
inputField.value = currentValue + 1;
var x = item.querySelector('.total-price').id;
resultField = item.querySelector('.result-btn').value = x* inputField.value;
document.querySelector('.title').innerHTML = item.querySelector('.result-btn')[0].value
+item.querySelector('.result-btn')[1].value + item.querySelector('.result-btn')[2].value
} else inputField.value = 100
});
});