i have a list of products (html article elements) on my website
var addToBasket = document.getElementsByClassName('add_to_basket')
var productSummary = document.getElementsByClassName('product_summary')
for (var i=0; i < productSummary.length; i++){
var productTitle = productSummary[i].children[1].innerHTML
var productPrice = productSummary[i].children[2].innerHTML
var productObject = {
title: productTitle,
price: productPrice,
quantity: 1
}
productSummary[i].children[3].addEventListener('click', function(e){
e.preventDefault();
console.log(this, 'this');
console.log(productObject, 'po4');
})
}
basically what this code does is find all the elements with that class, i then iterate over them and attach an event listener.
each article has a button has one of it's children. when i click that button i am hoping it will return me that products details in my productObject.
when i console.log(this)
i get the button in that particular element. i.e when i click on product A it logs me the A element and when i click on product B it logs me the B element. however, when i console.log(productObject)
it always logs me the last element (product B). how can i attach it so for each article it stores the details in the object correctly?