I'm developing a website (front end only) and im having issues with the shopping cart. im new to coding so i followed a couple of different tutorials to achieve a fully functioning shopping cart. However, my code isnt working. the original code allowed me to increase and decrease the quantity of an item in the shopping cart and it also changed the price accordingly. however, it did not let me remove items out of the shopping cart, therefore using another tutorial i added the next bit of code to allow me to remove items from the shopping cart, it works as in i can remove items from the shopping cart however now i cant increase/decrease the quantity so my old code now isnt working.
`var removecartitemsbutton = document.getElementsByClassName('product-close-btn')
console.log (removecartitemsbutton)
for (var i = 0; i <removecartitemsbutton.length; i ++){
var button = removecartitemsbutton[i]
button.addEventListener('click', function(event){var buttonclicked = event.target
buttonclicked.parentElement.parentElement.remove()
updatecarttotal()})
}
function updatecarttotal() {
var cartitemcontainer = document.getElementsByClassName('product-card')[0]
var cartrows = cartitemcontainer.getElementsByClassName('card')
} for (var i = 0; i < cartrows.length; i ++){
var cartrow = cartrows[i]
var priceElement = cartrow.getElementsByClassName('price')[0]
var quantityElement = cartrow.getElementsByClassName('product-qty')[0]
console.log(priceElement, quantityElement)
}`
this code allowed me to remove items^^^^^^^^^^^^^^^
the code below is the original code which lets me increase/decrease items and changes price accordingly
`'use strict';
const totalElem = document.querySelector('#total');
// loop: for add event on multiple `increment` & `decrement` button
for (let i = 0; i < incrementBtn.length; i++) {
incrementBtn[i].addEventListener('click', function () {
// collect the value of `quantity` textContent,
// based on clicked `increment` button sibling.
let increment = Number(this.previousElementSibling.textContent);
// plus `increment` variable value by 1
increment++;
// show the `increment` variable value on `quantity` element
// based on clicked `increment` button sibling.
this.previousElementSibling.textContent = increment;
totalCalc();
});
decrementBtn[i].addEventListener('click', function () {
// collect the value of `quantity` textContent,
// based on clicked `decrement` button sibling.
let decrement = Number(this.nextElementSibling.textContent);
// minus `decrement` variable value by 1 based on condition
decrement <= 1 ? 1 : decrement--;
// show the `decrement` variable value on `quantity` element
// based on clicked `decrement` button sibling.
this.nextElementSibling.textContent = decrement;
totalCalc();
});
}
// function: for calculating total amount of product price
const totalCalc = function () {
// declare all initial variable
const tax = 0.05;
let subtotal = 0;
let totalTax = 0;
let total = 0;
// loop: for calculating `subtotal` value from every single product
for (let i = 0; i < quantityElem.length; i++) {
subtotal += Number(quantityElem[i].textContent) * Number(priceElem[i].textContent);
}
// show the `subtotal` variable value on `subtotalElem` element
subtotalElem.textContent = subtotal.toFixed(2);
// calculating the `totalTax`
totalTax = subtotal * tax;
// show the `totalTax` on `taxElem` element
taxElem.textContent = totalTax.toFixed(2);
// calcualting the `total`
total = subtotal + totalTax;
// show the `total` variable value on `totalElem` & `payAmountBtn` element
totalElem.textContent = total.toFixed(2);
payAmountBtn.textContent = total.toFixed(2);
`
i tried to make the coexist and work together as both parts are needed for a shopping cart (removing items and increasing/decreasing items). i tried changing names of functions so they're all the same. however i haven't had any luck.
