В этом тренажере вы попрактикуетесь в обработке событий изменения, которые происходят в элементах HTML-формы. Вам будут представлены различные сценарии, где нужно будет реагировать на изменения значений в текстовых полях, выпадающих списках, чекбоксах и других элементах управления. В каждом задании будет предоставлен HTML-код и частично написанный JavaScript-код. Ваша задача - дополнить JavaScript-код, чтобы он корректно обрабатывал события и выполнял требуемые действия. Внимательно читайте условия заданий и используйте свои знания JavaScript и DOM, чтобы найти правильные решения.
- Модуль 1: Основы выбора элементов
- Выбор элемента по ID.
- Выбор элементов по классу.
- Выбор элементов по тегу.
- Выбор по селектору CSS.
- Выбор по атрибуту.
- Поиск элементов внутри другого элемента.
- Поиск родительского элемента.
- Поиск соседних элементов (предыдущий, следующий).
- Поиск первого и последнего дочернего элемента.
- Поиск всех дочерних элементов.
- Модуль 2: Манипуляция содержимым
- Модуль 3: Работа с атрибутами
- Модуль 4: Управление классами
- Модуль 5: Управление стилями
- Модуль 6: Создание и удаление элементов
- Создание нового элемента.
- Вставка элемента перед другим элементом.
- Вставка элемента после другого элемента.
- Добавление элемента в определенную позицию внутри списка дочерних элементов.
- Удаление элемента из DOM.
- Замена одного элемента другим.
- Перемещение существующего элемента в другое место DOM..
- Очистка содержимого элемента без его удаления.
- Модуль 7: Обработка событий
- Модуль 8: Работа с формами
- Модуль 9: Продвинутые манипуляции
- Модуль 10: Работа с размерами и прокруткой
- Получение размеров элемента.
- Получение позиции элемента относительно окна браузера.
- Получение позиции элемента относительно родительского элемента.
- Управление прокруткой страницы.
- Определение, виден ли элемент в текущей области просмотра.
- Плавная прокрутка к элементу.
- Создание элемента, который фиксируется при прокрутке.
- Модуль 11: Работа с медиа-элементами
- Модуль 12: Практические задания
Изменение текста в поле ввода
В этом задании у вас есть текстовое поле и абзац. Когда пользователь вводит текст в поле и убирает с него фокус (например, щелкая мышью в другом месте страницы), содержимое абзаца должно обновляться, отображая введенный текст. Вам нужно добавить обработчик события, который будет отслеживать изменения в текстовом поле и обновлять текст абзаца.
<input type="text" id="myInput">
<p id="myParagraph"></p>document.getElementById("myInput").addEventListener(input__1, function(event) {
document.getElementById("myParagraph").textContent = input__2;
});Изменение цвета фона при выборе из списка
У вас есть выпадающий список (`select`) с несколькими вариантами цветов. Когда пользователь выбирает другой цвет из списка, цвет фона абзаца должен изменяться на выбранный цвет. Допишите JavaScript-код, чтобы реализовать это поведение.
<select id="colorSelect">
<option value="red">Красный</option>
<option value="green">Зеленый</option>
<option value="blue">Синий</option>
</select>
<p id="colorParagraph">Этот текст меняет цвет фона</p>document.getElementById("colorSelect").addEventListener(input__1, function(event) {
document.getElementById("colorParagraph").input__2.backgroundColor = event.target.input__3;
});Переключение класса при установке/снятии флажка
У вас есть чекбокс и абзац. Когда чекбокс отмечен, абзацу должен добавляться класс `highlight`. Когда чекбокс не отмечен, класс `highlight` должен удаляться. Вам нужно написать обработчик события `change` для чекбокса, который будет управлять классом абзаца.
.highlight {
background-color: yellow;
}<input type="checkbox" id="myCheckbox">
<p id="checkboxParagraph">Этот абзац выделяется</p>document.getElementById("myCheckbox").addEventListener(input__1, function(event) {
if (event.target.input__2) {
document.getElementById("checkboxParagraph").classList.input__3("highlight");
} else {
document.getElementById("checkboxParagraph").classList.input__4("highlight");
}
});Обновление счетчика при вводе текста
Имеется текстовое поле и абзац, отображающий количество введенных символов. Каждый раз, когда пользователь вводит или удаляет символ в текстовом поле, счетчик в абзаце должен обновляться. Необходимо использовать событие, которое реагирует на каждое изменение содержимого текстового поля.
<input type="text" id="myInput2">
<p id="counterParagraph">Символов: 0</p>document.getElementById("myInput2").addEventListener(input__1, function(event) {
document.getElementById("counterParagraph").textContent = "Символов: " + input__2.target.value.input__3;
});Отображение выбранного изображения
Есть выпадающий список с URL изображений и тег `<img>`. Когда пользователь выбирает URL из списка, соответствующее изображение должно отображаться в теге `<img>`. Реализуйте это, используя событие `change`.
<select id="imageSelect">
<option value="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png">Изображение 1</option>
<option value="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png">Изображение 2</option>
<option value="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png">Изображение 3</option>
</select>
<img id="myImage" src="" alt="Selected Image" width="300" height="300">document.getElementById(input__1).addEventListener("change", function(event) {
document.getElementById("myImage").src = input__2.target.value;
});Валидация email при вводе
Есть текстовое поле для ввода email и абзац для вывода сообщения об ошибке. При каждом изменении содержимого поля нужно проверять, является ли введенный текст корректным email-адресом. Если нет, выводить сообщение об ошибке в абзац. Если email корректный, сообщение об ошибке нужно убрать.
<input type="text" id="emailInput">
<p id="emailError" style="color: red;"></p>const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
document.getElementById("emailInput").addEventListener(input__1, function(event) {
const email = event.target.value;
if (!input__2.test(email)) {
document.getElementById("emailError").textContent = input__3;
} else {
document.getElementById("emailError").textContent = "";
}
});Динамическое обновление суммы
Есть два числовых поля ввода и абзац, в котором отображается их сумма. При изменении значения любого из полей сумма должна пересчитываться и отображаться в абзаце.
<input type="number" id="num1" value="0">
<input type="number" id="num2" value="0">
<p id="sumParagraph">Сумма: 0</p>function updateSum() {
const num1 = Number(document.getElementById("num1").value);
const num2 = Number(document.getElementById(input__1).value);
document.getElementById("sumParagraph").textContent = "Сумма: " + (num1 + num2);
}
document.getElementById("num1").addEventListener(input__2, updateSum);
document.getElementById("num2").addEventListener("input", updateSum);Фильтрация списка
Есть текстовое поле и список элементов (`ul`). При вводе текста в поле, список должен фильтроваться: должны оставаться только те элементы списка, которые содержат введенный текст. Регистр символов не должен учитываться.
<input type="text" id="filterInput">
<ul>
<li>Яблоко</li>
<li>Банан</li>
<li>Апельсин</li>
<li>Груша</li>
<li>Виноград</li>
</ul>document.getElementById("filterInput").addEventListener(input__1, function(event) {
const filterText = event.target.value.toLowerCase();
const listItems = document.querySelectorAll(input__2);
listItems.forEach(item => {
const itemText = item.textContent.toLowerCase();
if (itemText.input__3(filterText)) {
item.style.display = "";
} else {
item.style.display = input__4;
}
});
});
Загрузка...