• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

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

220061

Well-Known Coder
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()
PHP:
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 :
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

HTML, CSS and JS Coder
Staff Team
Guardian
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:
JavaScript:
function addToCartClicked(event) {
    var button = event.target
    var shopItem = button.parentElement.parentElement
    var title = shopItem.getElementsByClassName('fw-bolder')[0].innerText
    console.log(title)
}
 

220061

Well-Known Coder
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:
JavaScript:
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
 
Top