Практическое задание

Оживи карточку с помощью JS

HTML + CSS + JavaScript — добавляем интерактивность и логику

Пример результата (накликай уровень!)
Кибер-Самурай

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

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

  • 92Атака
  • 78Защита
  • 85Скорость
⚡ Как работает магия JavaScript

Чтобы изменить текст на странице по клику, нужно 3 шага:

  1. Дать элементу уникальное имя — атрибут id="имя".
  2. Добавить на кнопку обработчик клика — onclick="мояФункция()".
  3. Внутри тега <script> написать саму функцию.

Внутри функции мы ищем тег и меняем его содержимое с помощью свойства innerHTML:

document.getElementById('level').innerHTML = currentLevel;

Этот код говорит: «Браузер, найди элемент с id="level" и замени то, что внутри него, на новое значение из переменной currentLevel».

Задание

Готовый HTML и CSS уже есть. Твоя задача — написать JavaScript.

  1. Найди в коде <span> с числом уровня и добавь ему id="level"
  2. Найди <strong> с числом атаки и добавь ему id="attack"
  3. Добавь тегу <button> атрибут: onclick="levelUp()"
  4. В самом низу создай парный тег <script>
  5. Внутри скрипта напиши функцию function levelUp() { ... }
  6. Внутри функции получи элементы по их ID и измени их значения (уровень +1, атака +5) через свойство innerHTML.
Песочница
Твой код (Допиши JS в самом низу)
Превью
Нажми «▶ Запустить»
чтобы проверить логику
Пример решения
Чеклист выполнения
0 / 6 выполнено
Частые ошибки JS