Ребята, объясните, пожалуйста, для тупых: почему не проходит проверку результат работы этого кода?
function createElement (tagName, className, text)
{
var element = document.createElement(tagName);
element.classList.add(className);
if (text)
{
element.textContent = text;
};
return element;
};
function renderCards (data)
{
var
cardList = document.querySelector('ul') ,
card /* card of product */ ,
title /* key: text */ ,
image /* key: imgUrl */ ,
price /* key: price */ ,
special /* key: specialOffer */ ;
for (var i = 0; i < data.length; i++)
{
card = createElement('li' , 'good');
title = createElement('h2' , 'good__description', data[i].text);
image = createElement('img', 'good__image', data[i].text);
price = createElement('p' , 'good__price', data[i].price);
image.src = data[i].imgUrl;
price.textContent += '₽/кг';
card.appendChild(title);
card.appendChild(image);
card.appendChild(price);
if (data[i].inStock)
{
card.classList.add('good--available');
}
else
{
card.classList.add('good--unavailable');
};
if (data[i].isHit)
{
card.classList.add('good--hit');
special = createElement('p', 'good__special-offer', data[i].specialOffer);
card.appendChild(special);
};
cardList.appendChild(card);
};
};
renderCards(cardsData);
И так, я через консоль браузера “вытащил” JS-код для своего решения и того, с которым сравниваются результаты. Скопировал оба и привёл в notepad++ к развёрнутому виду, и вот как они выглядят:
Мой:
function createElement(tagName, className, text)
{
try
{
var element = document.createElement(tagName);
element.classList.add(className);
if (text)
{
element.textContent = text;
};
return element;
}
catch (__err)
{
console.error(__err);
}
};
function renderCards(data)
{
try
{
var cardList = document.querySelector('ul'), card, title, image, price, special;
for (var i = 0; i < data.length; i++)
{
__TO659.check();
card = createElement('li', 'good');
title = createElement('h2', 'good__description', data[i].text);
image = createElement('img', 'good__image', data[i].text);
price = createElement('p', 'good__price', data[i].price);
image.src = data[i].imgUrl;
price.textContent += '₽/кг';
card.appendChild(title);
card.appendChild(image);
card.appendChild(price);
if (data[i].inStock)
{
card.classList.add('good--available');
}
else
{
card.classList.add('good--unavailable');
};
if (data[i].isHit)
{
card.classList.add('good--hit');
special = createElement('p', 'good__special-offer', data[i].specialOffer);
card.appendChild(special);
};
cardList.appendChild(card);
};
}
catch (__err)
{
console.error(__err);
}
};
renderCards(cardsData);
От HTML Academy:
var makeElement = function (tagName, className, text)
{
var element = document.createElement(tagName);
element.classList.add(className);
if (text)
{
element.textContent = text;
}
return element;
};
var createCard = function (good)
{
var listItem = makeElement('li', 'good');
var availabilityClass = 'good--available';
if (!good.inStock)
{
availabilityClass = 'good--unavailable';
}
listItem.classList.add(availabilityClass);
var title = makeElement('h2', 'good__description', good.text);
listItem.appendChild(title);
var picture = makeElement('img', 'good__image');
picture.src = good.imgUrl;
picture.alt = good.text;
listItem.appendChild(picture);
var price = makeElement('p', 'good__price', good.price + '₽/кг');
listItem.appendChild(price);
if (good.isHit)
{
listItem.classList.add('good--hit');
var specialOffer = makeElement('p', 'good__special-offer', good.specialOffer);
listItem.appendChild(specialOffer);
}
return listItem;
};
var renderCards = function (goods)
{
var cardList = document.querySelector('.goods');
for (var i = 0; i < goods.length; i++)
{
__TO405.check();
var cardItem = createCard(goods[i]);
cardList.appendChild(cardItem);
}
};
renderCards(cardsData);
Я, правда, с этим буду и дальше сидеть и разбираться, но пока что использую “оригинальный” код для решения.
у вас некорректно альт изображений прописывается. вы поместили текст внутрь контейнера img, а надо было альтом его разместить.
поправьте свой код, изменив свои строки на эти.
image.alt = data[i].text; //добавить
image = createElement('img', 'good__image'); //изменить
бтв, вы php до этого изучали?
красиво у вас код описан, очень нравится структурно
Упс… а про alt изображений я забыл…
Нет, до этого изучал C# и Pascal (последний в рамках школьной программы)
чувствуется влияние обоих =) от C# фигурные скобки,а от паскаля описание переменных в начале программы
(если что, описание переменных через запятую это плохой тон, также как и отделять блоки кода фигурными скобками, вместо этого в js открывающая скобка пишется на строчке модальной конструкции (if, while, for, function, etc.) - ну эт придираюсь прост, лечится бьютифаером кода).
И от Хауди Хо структура описания переменных в комментариях.
Про описание переменных через запятую учту.
Всё, теперь все проверки проходят.
И вот так теперь выглядит окончательный вариант кода:
function createElement (tagName, className, text)
{
var element = document.createElement(tagName);
element.classList.add(className);
if (text)
{
element.textContent = text;
};
return element;
};
function renderCards (data)
{
var
cardList = document.querySelector('ul') ,
card /* card of product */ ,
title /* key: text */ ,
image /* key: imgUrl */ ,
price /* key: price */ ,
special /* key: specialOffer */ ;
for (var i = 0; i < data.length; i++)
{
card = createElement('li' , 'good');
image = createElement('img', 'good__image');
title = createElement('h2' , 'good__description', data[i].text);
price = createElement('p' , 'good__price', data[i].price);
image.alt = data[i].text;
image.src = data[i].imgUrl;
price.textContent += '₽/кг';
card.appendChild(title);
card.appendChild(image);
card.appendChild(price);
if (data[i].inStock)
{
card.classList.add('good--available');
}
else
{
card.classList.add('good--unavailable');
};
if (data[i].isHit)
{
card.classList.add('good--hit');
special = createElement('p', 'good__special-offer', data[i].specialOffer);
card.appendChild(special);
};
cardList.appendChild(card);
};
};
renderCards(cardsData);
Спасибо за помощь!