I need to debug my Javascript code. Help please

I don't know why the items arent updating in the shopping cart. only the last item shows

if (document.readyState == 'loading') {
document.addEventListener('DOMContentLoaded', ready)
} else {
ready()
}

function ready() {
var removeCartItemButtons = document.getElementsByClassName('btn-danger') //removes item
for (var i = 0; i < removeCartItemButtons.length; i++) {
var button = removeCartItemButtons[i]
button.addEventListener('click', removeCartItem)
}

var quantityInputs = document.getElementsByClassName('cart-quantity-input') //input for quantity
for (var i=0 ; i < quantityInputs.length; i++) {
    var input = quantityInputs[i]
    input.addEventListener('change', quantityChanged)
}

var addToCartButtons = document.getElementsByClassName('shop-item-button')
for (var i = 0; i < addToCartButtons.length; i++) {
    var button = addToCartButtons[i]
    button.addEventListener('click', addToCartClicked)
}

document.getElementsByClassName('btn-purchase')[0].addEventListener('click', purchaseClicked) //once pressed it simulates a purchase and clears the items

}

function purchaseClicked() {
alert('Thank you for your purchase')
var cartItems = document.getElementsByClassName('cart-items')[0]
while (cartItems.hasChildNodes()) {
cartItems.removeChild(cartItems.firstChild)
}
updateCartTotal()
}

function removeCartItem(event) {
var buttonClicked = event.target
buttonClicked.parentElement.parentElement.remove()
updateCartTotal()
}

function quantityChanged(event) {
var input = event.target
if (isNaN(input.value) || input.value <= 0) { //checks if iput is a number and positive value
input.value = 0
}
updateCartTotal()
}

function addToCartClicked(event) {
var button = event.target
var shopItem = button.parentElement //.parentElement
var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText
var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText
var imageSrc = shopItem.getElementsByClassName('shop-item-image')[0].src
addItemToCart(title, price, imageSrc)
updateCartTotal()
}

function addItemToCart(title, price, imageSrc) {
var cartRow = document.createElement('div')
cartRow.classList.add('cart-row')
var cartItems = document.getElementsByClassName('cart-items')[0]
var cartItemNames = cartItems.getElementsByClassName('cart-item-title')
for (var i = 0; i < cartItemNames.length; i++) {
if (cartItemNames[i].innerText == title) {
alert('This item is already added to the cart')
return
}
}
var cartRowContents =
<div class="cart-item cart-column">
<img class="cart-item-image" src="${imageSrc}" width="100" height="100">
<span class="cart-item-title">${title}</span>
</div>
<span class="cart-price cart-column">${price}</span>
<div class="cart-quantity cart-column">
<input class="cart-quantity-input" type="number" value="1">
<button class="btn btn-danger" type="button">REMOVE</button>
</div>
cartRow.innerHTML = cartRowContents
cartItems.append(cartRow)
cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click', removeCartItem)
cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged)
}

function updateCartTotal() {
var cartItemContainer = document.getElementsByClassName('cart-items')[0]
var cartRows = cartItemContainer.getElementsByClassName('cart-row')
var total = 0
for (var i = 0; i < cartRows.length; i++) {
var cartRow = cartRows[i]
var priceElement = cartRow.getElementsByClassName('cart-price')[0]
var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]
var price = parseFloat(priceElement.innerText.replace('$', ''))
var quantity = quantityElement.value
var subtotal = (price * quantity)
document.getElementById("subtotals").innerHTML = subtotal; //posts result on html
var shipping = 7.99
var taxRate= 0.0825
var taxes = subtotal*taxRate; //(0.0825*subtotal)
taxes = Math.round(taxes * 100) / 100 //Keeps taxes to two decimals
document.getElementById("tax").innerHTML = taxes;

    total = total + shipping + taxes + subtotal
        document.getElementById("totals").innerHTML = total; //prints on the html file
}
total = Math.round(total * 100) / 100 //Keeps total to two decimals

document.getElementsByClassName('cart-total-price')[0].innerText = '$' + total

}

Comments

[Adrian Samuel]

Hey Alexis!

We'd love to help! Do you know how to use Github? It might make it easier if you put your code there so we can see everything together

github.com/

Here's a simple guide to github: guides.github.com/activities/hello...

[euse44]

Regular detailing can help protect your vehicle from the damaging effects of environmental factors and everyday wear and tear. By investing in professional detailing imo car washes near me, you can prevent the need for more significant repairs or replacements in the future, saving you money in the long run.