JavaScript clicking on button doesn't show title in the console.log

[220061]

Hello I'm following a tutorial on javascript and I try to implement this into my project but I have a problem. whenever I click on the add to cart button it doesn't show the title in the console.log like I want it to. how do I fix this
this is my error:
Uncaught TypeError: Cannot read properties of undefined (reading 'innerText')
at HTMLDivElement.addToCartClicked (winkel.js:46)

this is the while loop that generates everything it works but I need to show <div class="title"></div> in the console.log()

while($row = $result-> fetch_assoc()){
            
            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>';
        }

and this is the javascript :

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

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()

}

//this should show the title in the console.log() but sadly it doesn't work
function addToCartClicked(event) {
    var button = event.target
    var shopItem = button.parentElement.parentElement
    var title = shopItem.getElementsByClassName('title')[0].innerText
    console.log(title)

}

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
        total = total + (price * quantity)
    }
    total = Math.round(total * 100) / 100
    document.getElementsByClassName('cart-total-price')[0].innerText = '$' + total
}

 

[Johna]

I'm not sure if this is the reason, but it could be because there is no text in the <div class="title"></div>, but an element. You might have to do this instead:

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

 

[220061]

I'm not sure if this is the reason, but it could be because there is no text in the <div class="title"></div>, but an element. You might have to do this instead:

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

thanks for your reply but sadly this doesn't work either

 

[220061]

I had to add another parentElement to the var shopItem