Я создаю карточки на странице, но после этого надо обработать нажатие на них, но я не пойму как взять эти элементы со страницы, мой вариант у меня не работает.
<section class="card">
<div class="container">
<div class="card__wrapper">
</div>
</div>
</section>
export function card(){
//Use DB
const cardWrapper = document.querySelector('.card__wrapper');
class Card {
constructor(img,alt,title_front,descr_front, title_back, descr_back) {
this.img = img;
this.alt = alt;
this.title_front = title_front;
this.descr_front = descr_front;
this.descr_back = descr_back;
this.title_back = title_back;
}
render(){
const card = document.createElement('div');
card.classList.add('card__element');
card.innerHTML = `
<div class="card__side card__side-front">
<div class="card__title">${this.title_front}</div>
<div class="card__img"><img src="${this.img}" alt="${this.alt}"></div>
<div class="card__descr">${this.descr_front}</div>
</div>
<div class="card__side card__side-back">
<div class="card__title">${this.title_back}</div>
<div class="card__img"><img src="${this.img}" alt="${this.alt}"></div>
<div class="card__descr">${this.descr_back}</div>
</div>
`;
cardWrapper.append(card);
}
}
fetch('http://localhost:3000/card').then(res=>res.json()).then(data => {
data.forEach(({img,alt,title_front,descr_front,title_back,descr_back})=>{
new Card(img,alt,title_front,descr_front,title_back,descr_back).render();
});
});
//rotateX on card
const cards = document.querySelectorAll('.card__element');
console.log(cards);
cards.forEach((elem)=>{
elem.addEventListener('click',(e)=>{
console.log(e);
});
});
}
Вот что я получаю с этого
Скриншот кода удалён модератором.
Простой
