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>Aquí:
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}); }