CODEWITHSUNDEEP
javascript
Destiny Franks
Destiny Franks

Reputation: 821

Javascript: How to get individual item ids when clicking a button?

When I click on the button it shows in the console - undefined

I have tried creating an event listener on click but it still does not work as expected,

product_detail.html

 {{course.title}}
 <li><button class="btn_adcart update-cart data-course={{course.id}}" data-action="add">Add to Cart</button></li>

cart.js

const updateBtns = document.getElementsByClassName('update-cart')

for (let i = 0; i < updateBtns.length; i++){
    updateBtns[i].addEventListener("click", function(){
        let productId = this.dataset.course
        let action = this.dataset.action
        console.log('productId', productId, 'action', action);
        
    })
}

enter image description here

Upvotes: 0

Views: 49

Answers (2)

Ulysses Lanugon
Ulysses Lanugon

Reputation: 56

You miss the end quotation for the class name.

Wrong

class="btn_adcart update-cart data-course={{course.id}}"

Correct

class="btn_adcart update-cart" data-course={{course.id}}

Upvotes: 1

Destiny Franks
Destiny Franks

Reputation: 821

It looks like your quotation marks are not placed correctly around your class names, it is encompassing the data-course attribute

It should be <li><button class="btn_adcart update-cart" data-course={{course.id}} data-action="add">Add to Cart</button></li>

By: @GlenCarpenter

Upvotes: 0

Related Questions