How to console.log the innerText from elements that were removed?

JavaScript
1

Codepen

In my updateCartTotal() function I want to console.log the elements that were removed from my shopping cart.

Each time I press the remove button, I want it to print out the item , and price . However, whenever I do it it returns undefined. And in some instances it only recognizes 1 item only. I don’t think there is a problem with my JavaScript code rather it may be my HTML

const updateCartTotal = () => {
    var cartItemContainer = document.getElementsByClassName('cart-items')[0]
    var cartRows = cartItemContainer.getElementsByClassName('cart-row')

    for(var i = 0; i < cartRows.length; i++){
        var cartRow = cartRows[i];
        var itemElement= cartRow.getElementsByClassName('cart-item')[0].innerHTML
        var priceElement = cartRow.getElementsByClassName('cart-price')[0].innerHTML
        var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]

        var item = itemElement.innerText
        var price = priceElement.innerText
        // var quantity = quantityElement.value
        console.log(item, price)
    }
}

<section class="container shopping-cart">
    <div class="title">Cart</div>
    <div class="cart-row">
        <span class="cart-item cart-header cart-column">ITEM</span>
        <span class="cart-price cart-header cart-column">PRICE</span>
        <span class="cart-quantity cart-header cart-column">QUANTITY</span>
    </div>
    <div class="cart-items">
        <div class="cart-row">
            <div class="cart-item">
                <span class="cart-item-title">Item 1</span>
            </div>
            <span class="cart-price ">$14.99</span>
            <div class="cart-quantity-input">
                <input type="number" value="1">
                <button class="btn btn-danger ml-5" type="button">REMOVE</button>
            </div>
        </div>
        <div class="cart-row">
            <div class="cart-item">
                <span class="cart-item-title ">Item 2</span>
            </div>
            <span class="cart-price">$79.99</span>
            <div class="cart-quantity-input">
                <input type="number" value="2">
                <button class="btn btn-danger ml-5" type="button">REMOVE</button>
            </div>
        </div>
    </div>
</section>
2

There’s a typo. The variable cartItemContainer needs to use the class ‘cart-item’ instead of ‘cart-items’.

Also, the ready function isn’t hoisted since it’s written using arrow functions, so you have to either re-write it using the function keyword or move the on-load function call at the top to below it.

3

I changed the cartItemContainer to cart-item but that didn’t console.log anything. With my previous code it only console.logs the items that remain in the cart instead of console.loging the item that were removed

4

Hey, I re-read your question again and I made a mistake. It indeed should be cart-item.

Now the reason it’s only logging the items left in the cart is because the button removes the item that was clicked on before the logging.

Since the logging takes place after removing, it will only log the items still left and not include the one that was removed. If you want to log the removed item, you’ll have to write the code inside of the removeCartItems function.

This should work if you put it inside removeCartItems.

let item = buttonClicked.parentElement.parentElement.getElementsByClassName('cart-item')[0].innerText
let price = buttonClicked.parentElement.parentElement.getElementsByClassName('cart-price')[0].innerText
console.log(item, price)
5

Okay that worked for me. But console.loging was just a small piece to the puzzle in all this. I want to be able to make the price an actual number using parseFloat() and multiply that with the quantity value. In the end I want all of that to update the inner text of the total based off whats the price and quantity. And I was planning on using the updateCartTotal for all of that. I’m just lost on how I will connect all these together

6

It sounds like you have a solid plan for how to do it.

After you multiply the price and quantity, you can just set the innerText of the total element to that value.

What have you tried so far and what problems are you running into?