El forEach
funciona, trae toda la info de mis cards
que generé en un array, las funciones de ver más y botón volver funcionan de todas las cards pero me devuelven sólo la información de la primer card.
Éste es el código:
let cards = [
{ url: "https://placehold.it/50/30/eee", city: "A", cajaOculta: "AA1" },
{ url: "https://placehold.it/50/30/ff0", city: "B", cajaOculta: "BB1" },
{ url: "https://placehold.it/50/30/f00", city: "C", cajaOculta: "CC1" }
];
let card = document.getElementById('cards')
cards.forEach((info) => {
console.log(info)
card.innerHTML += `
<div class="card">
<img src="${info.url}" id="img">
<a id="city" class="city" onclick="verDescripcion()">${info.city}</a>
<div id="caja-oculta" style="display: none;">
<p class="textDesc">"${info.cajaOculta}"</p>
</div>
<button id="btnPrev" onclick="botonVolver()"> BACK</button>
</div>
`
})
const cajaOculta = document.getElementById('caja-oculta')
const city = document.getElementById('city')
const btnprev = document.getElementById('btnPrev')
const img = document.getElementById('img')
function verDescripcion() {
if (cajaOculta, card, city, img) {
cajaOculta.style.display = 'block'
card.style.background = 'black'
city.style.display = 'none'
img.style.display = 'none'
}
}
function botonVolver() {
if (cajaOculta, img, card) {
cajaOculta.style.display = 'none'
img.style.display = 'block'
city.style.display = 'block'
}
}
<div id="cards"></div>