Тринадцатая программа “Мороженое. Возвращение” - провал, хотя все верно

Курсы JavaScript в браузере
1

Все совпадает, но задание провалено - ВЫРУЧАЙТЕ

var cardsData = [
{
inStock: true,
imgUrl: ‘gllacy/choco.jpg’,
text: ‘Сливочно-кофейное с кусочками шоколада’,
price: 310,
isHit: true,
specialOffer: ‘Двойная порция сиропа бесплатно!’
},
{
inStock: false,
imgUrl: ‘gllacy/lemon.jpg’,
text: ‘Сливочно-лимонное с карамельной присыпкой’,
price: 125,
isHit: false
},
{
inStock: true,
imgUrl: ‘gllacy/cowberry.jpg’,
text: ‘Сливочное с брусничным джемом’,
price: 170,
isHit: false
},
{
inStock: true,
imgUrl: ‘gllacy/cookie.jpg’,
text: ‘Сливочное с кусочками печенья’,
price: 250,
isHit: false
},
{
inStock: true,
imgUrl: ‘gllacy/creme-brulee.jpg’,
text: ‘Сливочное крем-брюле’,
price: 190,
isHit: false
}
];

var makeElement = function (tagName, className, text) {
  var element = document.createElement(tagName);
  element.classList.add(className);
  if (text) {
    element.textContent = text;
  }
  return element;
};

var renderCards = function (product) {
  var listItem = makeElement('li', 'good');
  
  var title = makeElement('h2', 'good__description', product.text);
  listItem.appendChild(title);
  
  var picture = makeElement('img', 'good__image', product.text);
  picture.src = product.imgUrl;
  picture.alt = product.text;
  listItem.appendChild(picture);
  
  var price = makeElement('p', 'good__price', product.price + '₽/кг');
  listItem.appendChild(price);
  
  var availabilityClass = 'good--available';
  if (!product.inStock) {
    availabilityClass = 'good--unavailable';
  }
  listItem.classList.add(availabilityClass);
  
  if (product.isHit) {
    listItem.classList.add('good--hit');
    var specialOffer = makeElement('p', 'good__special-offer', product.specialOffer);
    listItem.appendChild(specialOffer);
  }
    return listItem;  
}

var cardList = document.querySelector('.goods');

for (var i = 0; i < cardsData.length; i++) {
  var cardItem = renderCards(cardsData[i]);
  cardList.appendChild(cardItem);
}

console.log(cardList);

image
image1371×885 104 KB

2

var picture = makeElement(‘img’, ‘good__image’, product.text);

product.text - вот это если убрать все заработает :wink:

3 
var makeElement = function(tagName, className, text) {
  var element = document.createElement(tagName);
  element.classList.add(className);
  if (text) {
    element.textContent = text;
  }
  return element;
}

var renderCards = function(product) {
  var listItem = makeElement('li', 'good');

  var title = makeElement('h2', 'good__description', product.text);
  listItem.appendChild(title);
  
  var picture = makeElement('img', 'good__image');
  picture.src = product.imgUrl;
  picture.alt = product.text;
  listItem.appendChild(picture);
  
  var price = makeElement('p', 'good__price', product.price + '₽/кг');
  listItem.appendChild(price);
  
  var availabilityClass = 'good--available';
  if (!product.inStock) {
    availabilityClass = 'good--unavailable';
    }
  listItem.classList.add(availabilityClass);
  

  if (product.isHit) {
    listItem.classList.add('good--hit');
    var special = makeElement('p', 'good__special-offer', product.specialOffer);
    listItem.appendChild(special);
  }
  
  return listItem;
  };

var cardList = document.querySelector('.goods');

for (let i = 0; i < cardsData.length; i++){
  var cardItem = renderCards(cardsData[i]);
  cardList.appendChild(cardItem);
  }
4

Написал без особых проблем, все отлично проверяется, но я не понимаю как карточки попадают в список на страницу. В решениях вижу, что ребята создают еще одну функцию и перебором добавляют каждую карточку в список. Мне этого не потребовалось, отсюда и вопрос.

Так же не пришлось возвращать что-то из функции, и при этом она отрабатывает.
В голове не каша, но рассеять непонимание хотелось бы, заранее спасибо!

Мой код с комментариями

Спойлер 
var cardsData = [...];

// функция в которой создается элемент
var createElement = function(tag, className, text) {
  var element = document.createElement(tag)
  element.classList.add(className)
  if (text) {
   element.textContent = text 
  }
  return element
}

// фкнкция в которой он встраивается в карточку
var renderCards = function(cards) {
  // перебираем входящий массив
  for (var i = 0; i < cards.length; i++) {
    // создаем элемент списка
    var card = createElement('li', 'good')
    // создаем элементы для карточки
    var title = createElement('h2', 'good__description', cards[i].text)
    // добавляем в карточку
    card.appendChild(title)
    
    var img = createElement('img', 'good__image')
    img.src = cards[i].imgUrl
    img.alt = cards[i].text
    card.appendChild(img)
    
    var price = createElement('p', 'good__price', cards[i].price + '₽/кг')
    card.appendChild(price)
    
    // если товар есть
    if (cards[i].inStock) {
      card.classList.add('good--available')
      // если он хит
      if (cards[i].isHit) {
        card.classList.add('good--hit')
        // создаем элемент параграфа
        var special = createElement('p', 'good__special-offer', cards[i].specialOffer)
        // добавляем в конец карточки
        card.appendChild(special)
      }
    // если нет
    } else {
      card.classList.add('good--unavailable')
    }
    // находим список
    // в него добавляем
    var list = document.querySelector('.goods')
    list.appendChild(card)
  }
}


renderCards(cardsData);