Вычёркивание товаров

В магазине удобно вычёркивать то, что уже лежит в тележке. В этом упражнении щелчок по товару отмечает его как купленный, и страница показывает его зачёркнутым. Повторный щелчок снимает отметку.

Куплен ли товар — это информация о самом товаре, поэтому её место в его объекте, в новом свойстве bought со значением true или false: { name: "Молоко", price: 90, bought: false }. Затем showItems() добавляет элементу li каждого купленного товара класс bought из стиля страницы, который его зачёркивает. Поскольку item.bought уже равно true или false, его можно использовать как условие само по себе: if (item.bought) означает то же, что if (item.bought === true).

Почему бы просто не добавлять класс при щелчке по товару? Потому что showItems() каждый раз, когда список меняется, создаёт все элементы li заново. Класс пропал бы вместе со старым li, как только вы добавили бы ещё один товар. Объекты в массиве остаются, поэтому информацию нужно хранить в них. Правило с самого начала проекта остаётся в силе: измените данные, затем снова покажите страницу.

Теперь щелчки. Внутри цикла в showItems() дайте каждому li собственный обработчик щелчка. Функция создаётся внутри цикла, поэтому она запоминает item из этого шага цикла: щелчок по молоку меняет молоко. Оператор ! превращает true в false и обратно:

li.addEventListener("click", function () {
    item.bought = !item.bought;
    showItems();
});

Обработчик вызывает showItems(), чтобы страница показала изменение. Вызывать showItems() из самой showItems() здесь можно: обработчик не выполняется, пока список показывается, а только позже, когда вы щёлкаете по товару.