I need to debug my Javascript code. Help please

alexis celeste — Fri, 24 Apr 2020 02:02:37 +0000

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

}

DEV Community: alexis celeste

I need to debug my Javascript code. Help please