vokir
@vokir
Trainee Front-End Developer

Как взять со страницы элементы, которые я создал до этого?

Я создаю карточки на странице, но после этого надо обработать нажатие на них, но я не пойму как взять эти элементы со страницы, мой вариант у меня не работает.

<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);
        });
    });

}


Вот что я получаю с этого

Скриншот кода удалён модератором.
  • Вопрос задан
  • 75 просмотров
Решения вопроса 1
wapster92
@wapster92 Куратор тега CSS
Когда у тебя обрабатывается строка
const cards = document.querySelectorAll('.card__element');

Данных элементов на странице еще нет. Есть три решения данной проблемы.
Навешивать события в методе render, но лучше всего использовать делегирование событий. И самый фиговый запрос fetch сделать через async/await, тогда элементы уже будут на странице и текущий код сработает
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы