illiatovpeko
@illiatovpeko
Занимаюсь самообразованием в области WebDev

Как правильно использовать метод в классе ES6 в данном случае?

Создаю экземпляр класса посредством перебора ранее указанного массива с данными, заполняя в index.html таким образом список строками (товарами). Нужно организовать функционал заказа и добавления в корзину (чисто фронтэнд, бэка не нежно), т.е. в каждой строке есть 2 кнопки, "заказать" и "в корзину", функционал которых я и пытаюсь зашить в методы класса. Попытался добавить метод toBuy(), но что-то делаю не так, и с вызовом метода что-то не получилось ...

//list of products

let products;
 
products = [
        
            {
                title: "Диван Баден-Баден",
                price: "20 000 рублей",
                link: "src/img/baden-baden.jpg",
                id: "baden-baden"
            },

            {
                title: "Диван Дубай",
                price: "19 000 рублей",
                link: "src/img/dubay.jpg",
                id: "dubay"
            },

            {
                title: "Диван Лион",
                price: "21 000 рублей",
                link: "src/img/lion.jpg",
                id: "lion"
            },

            {
                title: "Диван Стефани",
                price: "40 000 рублей",
                link: "src/img/stephani.jpg",
                id: "stephani"
            },


        ]

        // create product class

        class Product {
            constructor(id, link, title, price){
                this.id = id;
                this.link = link;
                this.title = title;
                this.price = price;
            }

            productAdder(){
                document.querySelector('ul').insertAdjacentHTML('beforeend',

                `<li>
                    <div class="item ${this.id}">
                        <img src="${this.link}" alt="" class="img">
                        <div class="description">
                            <h3 class="title">${this.title}</h3>
                            <p class="price">${this.price}</p>
                        </div>
                        <div class="buttons">
                            <button class="order js-order-${this.id}">Заказать</button>
                            <button class="cart" js-cart-${this.id}>В корзину</button>
                        </div>
                    </div>
                </li>`
                )
            }

            toBuy(){
                querySelector(`.js-order-${this.id}`).addEventlistener('click', function(){
                    console.log('it works');
                })
            };
            addToCart(){};
        }


        // insert products into the page

products.forEach(function(item){
    let newProduct = new Product(item.id, item.link, item.title, item.price).productAdder();
    newProduct.toBuy(); 
    });


Последняя строка вызывает ошибки (без неё список формируется) в ней и через 1 строку вверх.
Думаю, что и в toBuy() как-то не верно организовано (`.js-order-${this.id}`) ...

PS

Ошибки:

API.js:83 Uncaught TypeError: Cannot read property 'toBuy' of undefined
at API.js:83 (это для newProduct.toBuy();)
at Array.forEach ()
at API.js:81 (это для products.forEach(function(item){...} )

Так же foreach выдаёт только первый элемент
  • Вопрос задан
  • 126 просмотров
Пригласить эксперта
Ответы на вопрос 3
illiatovpeko
@illiatovpeko Автор вопроса
Занимаюсь самообразованием в области WebDev
Сейчас отделил productAdder() от
newProduct = new Product(item.id, item.link, item.title, item.price)
но проблема пока что Не решена:

products.forEach(function(item){
    let newProduct = new Product(item.id, item.link, item.title, item.price);
    newProduct.productAdder();
    newProduct.toBuy();
    
    });
Ответ написан
IceRD
@IceRD
Зачем вам классы и куча их экземпляров, когда вы обращаетесь с ними как с функцией, а не методами класса?
Вам достаточно одного экземпляра класса, закидывать массив в productAdder, на кнопки вешать onClick event c необходимыми методами и отображать.
Ответ написан
Krasnodar_etc
@Krasnodar_etc
little front
В productAdder, в самом конце нужен return this;
Ответ написан
Ваш ответ на вопрос

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

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