Вывод объектов с помощью метода

124

16 апреля 2022, 05:40

Нужно вывести 3 карточки товара. Задание: Создать класс, позволяющий создавать карточку товара. Разместить на странице 3 объекта (карточки), созданные на базе этого класса. В классе должен быть метод render, позволяющий выводить карточку на страницу.

window.addEventListener('DOMContentLoaded',function(){
    class MenuCard {
    constructor(src, alt, title, descr, price, parentSelector, classes) {
    this.src = src;
    this.alt = alt;
    this.title = title;
    this.descr = descr;
    this.price = price;
    this.classes = classes;
    this.parent = document.querySelector(parentSelector);
    render() 
    {
    const element = document.createElement('div');
    element.innerHTML = `
    <img src=${this.src} alt=${this.alt}>
    <h3 class="menu__item-subtitle">${this.title}</h3>
    <div class="menu__item-descr">${this.descr}</div>
    <div class="menu__item-divider"></div>
    <div class="menu__item-price">
    <div class="menu__item-cost">Цена:</div>
    <div class="menu__item-total"><span>${this.price}</span> руб</div>
    </div>
    `;
    }
    let a = new MenuCard(
    "img/images4.jpg",
    "товар1",
    "полное название1",
    "описание1 ",
    2530,
    ".menu .container",
    ).render();
    let b = new MenuCard(
    "img/images4.jpg",
    "товар2",
    "полное название2",
    "описание2",
    8000,
    ".menu .container",
    ).render();
    
    let c = new MenuCard(
    "img/images4.jpg",
    "товар3",
    "полное название3",
    "описание3",
    2280,
    ".menu .container",
    ).render();
    }
    }
    })
</script>

Answer 1

(function() {
class MenuCard {
  constructor(src, alt, title, descr, price, parentSelector, classes) {
    this.src = src;
    this.alt = alt;
    this.title = title;
    this.descr = descr;
    this.price = price;
    this.classes = classes;
    this.parent = document.querySelector(parentSelector);
  }
  render() {
    const element = document.createElement('div');
    element.innerHTML = `
          <img src=${this.src} alt=${this.alt}>
          <h3 class="menu__item-subtitle">${this.title}</h3>
          <div class="menu__item-descr">${this.descr}</div>
          <div class="menu__item-divider"></div>
          <div class="menu__item-price">
          <div class="menu__item-cost">Цена:</div>
          <div class="menu__item-total"><span>${this.price}</span> руб</div>
          </div>
          `;
    document.querySelector('body').append(element);
  }
}
let a = new MenuCard(
  "img/images4.jpg",
  "товар1",
  "полное название1",
  "описание1 ",
  2530,
  ".menu .container",
).render();
let b = new MenuCard(
  "img/images4.jpg",
  "товар2",
  "полное название2",
  "описание2",
  8000,
  ".menu .container",
).render();
let c = new MenuCard(
  "img/images4.jpg",
  "товар3",
  "полное название3",
  "описание3",
  2280,
  ".menu .container",
).render();
})()

Код не работал, потому что вы не читаете документацию. Вы определили класс, и в определении класса определяете переменные. Так ещё и метод render() написали без this.

Не отображалось потому, что в DOM не добавили. Я добавил карточки в <body>(document.querySelector('body').append(element);). Вы можете это переопределить.