Обучение + Практика

Практическое задание. Добавь герою инвентарь

Разбираем, как собирать предметы в массив и выводить их на карточку персонажа

Пример результата (накликай снаряжение!)

Кибер-Самурай

Мечник • Уровень 42

92Атака
78Защита
85Скорость

Снаряжение:

⚡ Как работает логика: Массивы (Arrays)

Обычная переменная хранит только одно значение. Чтобы собирать список (инвентарь), нам нужна переменная-коробка — массив. В коде он обозначается квадратными скобками [].

// 1. Создаем пустой массив (рюкзак) let backpack = []; // 2. Функция, которая ловит предмет и кладет в массив function takeItem(item) { backpack.push(item); // 3. Склеиваем всё через пробел и выводим на экран document.getElementById('slots').textContent = backpack.join(' '); }

Команда .push() добавляет предмет в конец массива. Команда .join(' ') убирает запятые между предметами и ставит вместо них пробел, чтобы это красиво смотрелось на экране.

Задание

Верстка карточки Самурая уже готова. Твоя задача — оживить сбор снаряжения, следуя комментариям в коде.

Найди в коде элемент <span class="slots"> и добавь ему id="slots".
Кнопкам добавь вызов функции onclick="takeItem('💊')" (передавай нужный эмодзи).
В теге <script> создай пустой массив: let backpack = [];
Внутри функции добавь предмет в рюкзак: backpack.push(item);
Обнови экран, склеив элементы через пробел: document.getElementById('slots').textContent = backpack.join(' ');

Песочница

Твой код (Следуй комментариям внутри)

Превью

Нажми «▶ Запустить»
чтобы проверить инвентарь

Обучающее решение (с объяснениями)

Чеклист выполнения (отмечай вручную)

0 / 5 выполнено

Атрибут id="slots" добавлен инвентарю
Кнопкам добавлены вызовы onclick="takeItem(...)"
В JS создан массив let backpack = [];
Использован метод backpack.push(item)
Экран обновляется через .join(' ')

Частые ошибки JS

Забыты кавычки в HTML: написано onclick="takeItem(💊)" вместо '💊'
Массив создается внутри функции. Если так сделать, он будет обнуляться при каждом клике! Массив нужно создавать до функции.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Карточка Самурая с Инвентарем</title>
<style>
  body { background: #0a0a0a; color: #f0f0f0; font-family: sans-serif; padding: 20px; }
  article { background: #111; border: 2px solid #1e3548; border-radius: 12px; max-width: 320px; margin: 0 auto; overflow: hidden; }
  img { width: 100%; height: 200px; object-fit: cover; }
  section { padding: 20px; }
  h1 { color: #2dd4e4; margin: 0 0 5px; font-size: 24px; }
  .role { color: #888; font-size: 12px; margin-bottom: 15px; }
  .role span { color: #2dd4e4; font-weight: bold; }
  ul { list-style: none; padding: 0; display: flex; justify-content: space-between; margin-bottom: 15px; }
  li { text-align: center; }
  strong { display: block; font-size: 22px; color: #2dd4e4; }
  small { color: #888; font-size: 10px; text-transform: uppercase; }
  hr { border: none; height: 1px; background: #333; margin: 15px 0; }

/* Стили для инвентаря */
  .inventory-box { background: #050d12; border: 1px dashed #2dd4e4; padding: 10px; border-radius: 6px; margin-bottom: 15px; min-height: 48px; font-size: 20px; letter-spacing: 5px; }
  .inv-title { font-size: 10px; color: #7a9bb0; text-transform: uppercase; display: block; margin-bottom: 5px; font-family: monospace; }
  .btn-group { display: flex; gap: 8px; }
  button { flex: 1; padding: 10px; background: #1e3548; color: #f0f0f0; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; }
  button:hover { background: #2dd4e4; color: #0a0a0a; }
</style>
</head>
<body>

<article>
  <img src="https://static.tildacdn.com/tild3065-3530-4134-b734-303030343366/photo_2026-03-16_19-.jpg" alt="Самурай">
  <section>
    <h1>Кибер-Самурай</h1>
    <p class="role">Мечник • Уровень <span>42</span></p>
    <ul>
      <li><strong>92</strong><small>Атака</small></li>
      <li><strong>78</strong><small>Защита</small></li>
      <li><strong>85</strong><small>Скорость</small></li>
    </ul>
    <hr>

<div class="inventory-box">
      <span class="inv-title">Снаряжение:</span>
      
      <span class="slots"></span>
    </div>

<div class="btn-group">
      
      <button>Взять 💊</button>
      <button>Взять 🗡️</button>
      <button>Взять 🔋</button>
    </div>

</section>
</article>

function takeItem(item) {

// ШАГ 4: Добавь item в конец массива через .push()

// ШАГ 5: Найди элемент по id='slots' и запиши в textContent
    // содержимое массива, склеенное через .join(' ')

}
</script>
</body>
</html>

<div class="inventory-box">
      <span class="inv-title">Снаряжение:</span>
      
      <span class="slots" id="slots"></span>
    </div>

<div class="btn-group">
      
      <button onclick="takeItem('💊')">Взять 💊</button>
      <button onclick="takeItem('🗡️')">Взять 🗡️</button>
      <button onclick="takeItem('🔋')">Взять 🔋</button>
    </div>

</section>
</article>

// Функция принимает кликнутый эмодзи в переменную item
  function takeItem(item) {

// Закидываем предмет в конец массива
    backpack.push(item);

// Выводим массив на экран, склеивая его элементы пробелами
    document.getElementById('slots').textContent = backpack.join(' ');

}
</script>
</body>
</html>