Переключение класса: Тренажер JavaScript: Покоряем HTML DOM

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

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

Список тем

Задание 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. Переключение класса на нескольких элементах

Измените код так, чтобы при клике на кнопку, класс "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. Условное переключение класса

Добавьте условие, чтобы класс "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. Добавление класса при наведении мыши

Реализуйте добавление класса "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. Удаление класса по клику

Сделайте так, чтобы при клике на текстовое поле, с него удалялся класс "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. Переключение класса в зависимости от класса другого элемента

Реализуйте переключение класса "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. Переключение между двумя классами

Сделайте так, чтобы при клике на кнопку, 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()`

Используйте метод `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").

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

Результат

Лог

Выполнить

Отметить решенным

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