Цикл работает и корректно перебирает коллекцию DOM-элементов. Займёмся реализацией программы.

Будем считать, что массив с данными о товарах и псевдомассив с DOM-элементами всегда имеют одинаковую длину, это позволит перебирать две структуры в одном цикле. Заведём переменную product, которая будет соответствовать текущему товару. Тогда текущий DOM-элемент (мы уже сохраняем его в переменную element) и текущий товар будут совпадать друг с другом.

Чтобы отобразить статус наличия товара, надо добавлять DOM-элементу разные классы. Сделаем это в несколько шагов:

• Создадим переменную для хранения класса, связанного с наличием. По умолчанию считаем, что товар в наличии, поэтому исходное значение у переменной будет product--available.
• Добавим проверку свойства isAvailable у товара. Если оно равно false (товар не в наличии), изменим значение переменной на product--unavailable.
• С помощью classList.add() добавим DOM-элементу класс, хранящийся в переменной.

Из части «Условия» вы знаете, что булевы значения сами могут выступать в качестве условий. Поэтому наша проверка могла бы выглядеть примерно так:

var value = true;

if (value) {
  // Код выполнится
}

Только в нашем случае проверка должна сработать, если значение свойства isAvailable равно false. Поэтому нужна проверка с отрицанием:

var value = false;

if (!value) {
  // Код выполнится
}