Переключение класса [Модуль 4: Управление классами]: Тренажер JavaScript: Покоряем HTML DOM

Тренажер по работе с HTML DOM на JavaScript для пользователей с начальным и средним уровнем подготовки.

В этом наборе упражнений вы попрактикуетесь в динамическом изменении классов HTML элементов с помощью JavaScript. Вы научитесь добавлять, удалять и переключать классы, что является фундаментальным навыком для создания интерактивных веб-страниц. Каждое задание предоставит вам готовый HTML и частично написанный JavaScript код, где вам нужно будет заполнить пропуски, чтобы добиться желаемого результата.

Список тем

Задание 1. Простое переключение класса

id: 37023_toggle-class-1

Добавьте JavaScript код, чтобы при клике на кнопку, к параграфу добавлялся класс "highlight". При повторном клике класс должен удаляться.

CSS

.highlight {
  background-color: yellow;
}

HTML

Восстановить HTML

                      <button id="myButton">Переключить класс</button>
<p id="myParagraph">Это параграф для переключения класса.</p>

<button id="myButton">Переключить класс</button>
<p id="myParagraph">Это параграф для переключения класса.</p>

JavaScript

const button = document.input__1("#myButton");
const paragraph = document.input__2("myParagraph");

button.addEventListener("click", () => {
  paragraph.input__3.toggle("highlight");
});

                     const button = document.input__1("#myButton");
const paragraph = document.input__2("myParagraph");

button.addEventListener("click", () => {
  paragraph.input__3.toggle("highlight");
});

Для решения этой задачи вам понадобится получить доступ к кнопке и параграфу с помощью JavaScript. Используйте метод querySelector или getElementById для выбора элементов. Затем добавьте обработчик событий 'click' на кнопку. Внутри обработчика событий используйте свойство classList и метод toggle() для переключения класса "highlight" у параграфа.

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку

Задание 2. Переключение класса на нескольких элементах

id: 37023_toggle-class-multiple

Измените код так, чтобы при клике на кнопку, класс "active" переключался у всех элементов списка.

CSS

.active {
  font-weight: bold;
  color: blue;
}

HTML

Восстановить HTML

                      <button id="activateButton">Активировать список</button>
<ul id="myList">
  <li class="list-item">Пункт 1</li>
  <li class="list-item">Пункт 2</li>
  <li class="list-item">Пункт 3</li>
</ul>

<button id="activateButton">Активировать список</button>
<ul id="myList">
  <li class="list-item">Пункт 1</li>
  <li class="list-item">Пункт 2</li>
  <li class="list-item">Пункт 3</li>
</ul>

JavaScript

const activateButton = document.input__1("#activateButton");
const listItems = document.input__2(".list-item");

activateButton.addEventListener("click", () => {
  listItems.forEach(item => {
    item.input__3.toggle("active");
  });
});

                     const activateButton = document.input__1("#activateButton");
const listItems = document.input__2(".list-item");

activateButton.addEventListener("click", () => {
  listItems.forEach(item => {
    item.input__3.toggle("active");
  });
});

Используйте querySelectorAll для выбора всех элементов списка. Затем, в цикле forEach, переберите каждый элемент и переключите класс "active", используя classList.toggle().

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку

Задание 3. Условное переключение класса

id: 37023_conditional-toggle

Добавьте условие, чтобы класс "special" добавлялся только к четным элементам списка при клике на кнопку.

CSS

.special {
  background-color: lightgreen;
}

HTML

Восстановить HTML

                      <button id="specialButton">Сделать четные элементы особенными</button>
<ul id="itemList">
  <li class="item">Элемент 1</li>
  <li class="item">Элемент 2</li>
  <li class="item">Элемент 3</li>
  <li class="item">Элемент 4</li>
</ul>

<button id="specialButton">Сделать четные элементы особенными</button>
<ul id="itemList">
  <li class="item">Элемент 1</li>
  <li class="item">Элемент 2</li>
  <li class="item">Элемент 3</li>
  <li class="item">Элемент 4</li>
</ul>

JavaScript

const specialButton = document.input__1("specialButton");
const items = document.input__2(".item");

specialButton.addEventListener("click", () => {
  items.forEach((item, index) => {
    if (input__3 % 2 === 0) { // Проверяем, что индекс четный
      item.input__4.toggle("special");
    }
  });
});

                     const specialButton = document.input__1("specialButton");
const items = document.input__2(".item");

specialButton.addEventListener("click", () => {
  items.forEach((item, index) => {
    if (input__3 % 2 === 0) { // Проверяем, что индекс четный
      item.input__4.toggle("special");
    }
  });
});

Внутри цикла forEach добавьте условие, проверяющее индекс элемента. Используйте оператор % (остаток от деления) для проверки четности индекса. Если индекс четный, переключите класс "special".

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку

Задание 4. Добавление класса при наведении мыши

id: 37023_add-class-hover

Реализуйте добавление класса "hovered" к кнопке при наведении курсора мыши и удаление этого класса при уходе курсора с кнопки.

CSS

.hovered {
  background-color: lightblue;
  border: 2px solid blue;
}

HTML

Восстановить HTML

                      <button id="hoverButton">Наведи на меня</button>

<button id="hoverButton">Наведи на меня</button>

JavaScript

const hoverButton = document.input__1("hoverButton");

hoverButton.addEventListener("mouseenter", () => {
  hoverButton.input__2.add("hovered");
});

hoverButton.addEventListener("mouseleave", () => {
  hoverButton.input__3.remove("hovered");
});

                     const hoverButton = document.input__1("hoverButton");

hoverButton.addEventListener("mouseenter", () => {
  hoverButton.input__2.add("hovered");
});

hoverButton.addEventListener("mouseleave", () => {
  hoverButton.input__3.remove("hovered");
});

Используйте обработчики событий 'mouseover' (или 'mouseenter') для добавления класса и 'mouseout' (или 'mouseleave') для удаления класса. Примените методы classList.add() и classList.remove() соответственно.

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку

Задание 5. Удаление класса по клику

id: 37023_remove-class-click

Сделайте так, чтобы при клике на текстовое поле, с него удалялся класс "error", если он есть.

CSS

.error {
  border: 2px solid red;
}

HTML

Восстановить HTML

                      <input type="text" id="inputField" class="error" value="Ошибка">
<p>Кликните по текстовому полю, чтобы убрать ошибку.</p>

<input type="text" id="inputField" class="error" value="Ошибка">
<p>Кликните по текстовому полю, чтобы убрать ошибку.</p>

JavaScript

const inputField = document.input__1("inputField");

inputField.addEventListener("click", () => {
  inputField.input__2.remove("error");
});

                     const inputField = document.input__1("inputField");

inputField.addEventListener("click", () => {
  inputField.input__2.remove("error");
});

Добавьте обработчик события 'click' к текстовому полю. Внутри обработчика используйте classList.remove("error") для удаления класса. Метод remove() безопасно использовать, даже если класса нет - ошибки не будет.

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку

Задание 6. Переключение класса в зависимости от класса другого элемента

id: 37023_conditional-toggle-element

Реализуйте переключение класса "dark-theme" у элемента body, если кнопка имеет класс "light-mode". Если у кнопки нет класса "light-mode", то класс "dark-theme" у body должен быть удален.

CSS

.dark-theme {
  background-color: #333;
  color: white;
}
.light-mode {
  background-color: lightgray;
}

HTML

Восстановить HTML

                      <button id="themeButton" class="light-mode">Светлая тема</button>
<div id="content">Содержимое страницы</div>

<button id="themeButton" class="light-mode">Светлая тема</button>
<div id="content">Содержимое страницы</div>

JavaScript

const themeButton = document.input__1("themeButton");
const body = document.input__2("body");

themeButton.addEventListener("click", () => {
  if (themeButton.input__3.contains("light-mode")) {
    body.input__4.toggle("dark-theme");
  } else {
    body.input__5.remove("dark-theme");
  }
});

                     const themeButton = document.input__1("themeButton");
const body = document.input__2("body");

themeButton.addEventListener("click", () => {
  if (themeButton.input__3.contains("light-mode")) {
    body.input__4.toggle("dark-theme");
  } else {
    body.input__5.remove("dark-theme");
  }
});

Сначала получите доступ к кнопке и элементу body. Затем добавьте обработчик события 'click' на кнопку. Внутри обработчика проверьте, есть ли у кнопки класс "light-mode" с помощью classList.contains("light-mode"). В зависимости от результата, добавьте или удалите класс "dark-theme" у body.

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку

Задание 7. Переключение между двумя классами

id: 37023_switch-two-classes

Сделайте так, чтобы при клике на кнопку, div переключался между классами "class-a" и "class-b". Изначально у div должен быть класс "class-a".

CSS

.class-a {
  background-color: orange;
  padding: 20px;
}
.class-b {
  background-color: purple;
  color: white;
  padding: 20px;
}

HTML

Восстановить HTML

                      <button id="switchClassButton">Переключить классы</button>
<div id="myDiv" class="class-a">Этот div имеет класс class-a</div>

<button id="switchClassButton">Переключить классы</button>
<div id="myDiv" class="class-a">Этот div имеет класс class-a</div>

JavaScript

const switchClassButton = document.input__1("switchClassButton");
const myDiv = document.input__2("#myDiv");

switchClassButton.addEventListener("click", () => {
  if (myDiv.input__3.contains("class-a")) {
    myDiv.input__4.remove("class-a");
    myDiv.input__5.add("class-b");
  } else {
    myDiv.input__6.remove("class-b");
    myDiv.input__7.add("class-a");
  }
});

                     const switchClassButton = document.input__1("switchClassButton");
const myDiv = document.input__2("#myDiv");

switchClassButton.addEventListener("click", () => {
  if (myDiv.input__3.contains("class-a")) {
    myDiv.input__4.remove("class-a");
    myDiv.input__5.add("class-b");
  } else {
    myDiv.input__6.remove("class-b");
    myDiv.input__7.add("class-a");
  }
});

Добавьте обработчик 'click' на кнопку. Внутри обработчика проверьте, есть ли у div класс "class-a" с помощью classList.contains("class-a"). Если есть - замените на "class-b" (сначала удалите "class-a", затем добавьте "class-b"). Иначе - замените "class-b" на "class-a".

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку

Задание 8. Переключение нескольких классов с помощью `classList.toggle()`

id: 37023_toggle-multiple-classes

Используйте метод `classList.toggle()` для одновременного переключения классов "bold" и "italic" у параграфа при клике на кнопку.

CSS

.bold {
  font-weight: bold;
}
.italic {
  font-style: italic;
}

HTML

Восстановить HTML

                      <button id="styleButton">Переключить стили</button>
<p id="textParagraph">Этот текст может стать жирным и курсивным.</p>

<button id="styleButton">Переключить стили</button>
<p id="textParagraph">Этот текст может стать жирным и курсивным.</p>

JavaScript

const styleButton = document.input__1("styleButton");
const textParagraph = document.input__2("#textParagraph");

styleButton.addEventListener("click", () => {
  textParagraph.input__3.toggle("bold");
  textParagraph.input__4.toggle("italic");
});

                     const styleButton = document.input__1("styleButton");
const textParagraph = document.input__2("#textParagraph");

styleButton.addEventListener("click", () => {
  textParagraph.input__3.toggle("bold");
  textParagraph.input__4.toggle("italic");
});

Для решения этой задачи можно использовать `classList.toggle()` дважды в обработчике события 'click' - по одному разу для каждого класса ("bold" и "italic").

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку