Javascript get items title in the console.log

See more:

Javascript

what am I missing here? what I want is that when you click on the add to chart button that it will show the title of the product in the console (as a test) but I can't seem to ge it to work. I need to be able to click on the add to cart button and when I do that I want to shop the title of the cart-item in the console.log

this is my error:

winkel.js:46 Uncaught TypeError: Cannot read properties of undefined (reading 'innerText')
    at HTMLButtonElement.addToCartClicked (winkel.js:46)

this is the code for my products in html/php

while($row = $result-> fetch_assoc()){
            //echo $row['broodnaam'];
            echo '        <section class="py-5">
            <div class="shop-item">
            <div class="container px-4 px-lg-5 mt-5">
                <div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
                    <div class="col mb-5">
                        <div class="card h-100">
                            <!-- Product image dit kan later nog wel-->
                            <img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
                            <!-- Product details-->
                            <div class="card-body p-4">
                                <div class="text-center">
                                    <!-- Product name-->
                                    <div class="title">
                                        <h5 class="fw-bolder">'.$row['broodnaam']. '</h5>
                                    </div>
                                    <!-- Product price-->
                                    Prijs: €'.$row['prijs']. '<br>
                                    <!--voorraad--> 
                                    Voorraad: ' .$row['voorraad'].'
                                </div>
                            </div>
                            <!-- Product actions-->
                            <div class="shop-item-button">
                                <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                                    <div class="text-center"><button class="btn btn-outline-dark mt-auto shop-item-button" type="button">Add to cart</button></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </section>';
        }

javascript:

function ready() {
    var removeCartItemButtons = document.getElementsByClassName('btn-danger')
    console.log(removeCartItemButtons)
    //loop door alle knoppen in the cart
    for (var i = 0; i < removeCartItemButtons.length; i++) {
        var button = removeCartItemButtons[i]
        button.addEventListener('click', removeCartItem)
    }

    var quantityInputs = document.getElementsByClassName('cart-quantity-input')
    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)
    }
}
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) {
        input.value = 1
    }
    updateCartTotal()

}

function addToCartClicked(event) {
    var button = event.target
    var shopItem = button.parentElement.parentElement
    var title = shopItem.getElementsByClassName('title')[0].innerText
    console.log(title)

}

What I have tried:

been looking around on the internet