const buyBtn = document.querySelectorAll('.btnBuy');
const itemDesc = document.querySelector('.detail');
const priceDesc = document.querySelector('.price');
for (let counter = 0; counter < buyBtn.length; counter++) {
buyBtn[counter].addEventListener('click', function() {
getPrice()
})
}
const getPrice = function() {
const getPrice = function() {
const prices = priceDesc.textContent
console.log(prices);
}
getPrice()
}body {
background-color: cornsilk;
}
.items-1 {
margin-top: 20px;
margin-left: 10%;
}
.items-2 {
margin-top: -397px;
margin-left: 30%;
}<div class="items-1">
<img id="one" src="images/shoe chair.jpg" width="250px" height="300px" alt="">
<div class="desc">
<label class="detail">Antique Sofa</label> <br><br>
<label class="price">$500</label><br><br>
<input class="btnBuy" type="button" value="Buy">
</div>
</div>
<div class="items-2">
<img id="one" src="images/princess.jpg" width="250px" height="300px" alt="">
<div class="desc">
<label class="detail">Princess</label> <br><br>
<label class="price">$700</label><br><br>
<input class="btnBuy" type="button" value="Buy">
</div>
</div>Here:
const buyBtns = document.querySelectorAll('.btnBuy');
for (const buyBtn of buyBtns) {
buyBtn.addEventListener('click', getPrice);
}
function getPrice(event){
const parent = event.target.parentElement;
const itemDesc = parent.querySelector('.detail');
const priceDesc = parent.querySelector('.price');
const prices = priceDesc.textContent;
console.log({itemDesc,priceDesc,prices});
}