Автозаполнение полей: Тренажер JavaScript: Покоряем HTML DOM

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

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

Список тем

Установка значения текстового поля

Заполните текстовое поле с id "user-name" значением "John Doe". Это базовое упражнение, демонстрирующее, как получить доступ к элементу формы и установить его значение.

HTML

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

                      <input type="text" id="user-name">

<input type="text" id="user-name">

JavaScript

document.input__1("user-name").value = input__2;

                     document.input__1("user-name").value = input__2;

Используйте `document.getElementById()` для получения доступа к элементу по его ID. Затем используйте свойство `.value` для установки значения текстового поля.

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

Результат

Лог

Выполнить

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

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

Заполнение выпадающего списка

Установите выбранный option в выпадающем списке с id "city-select" на "London". Это показывает, как работать с элементами `<select>` и `<option>`.

HTML

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

                      <select id="city-select">
  <option value="Moscow">Moscow</option>
  <option value="London">London</option>
  <option value="Paris">Paris</option>
</select>

<select id="city-select">
  <option value="Moscow">Moscow</option>
  <option value="London">London</option>
  <option value="Paris">Paris</option>
</select>

JavaScript

document.getElementById("city-select").input__1 = input__2;

                     document.getElementById("city-select").input__1 = input__2;

Используйте `document.getElementById()` для доступа к элементу `<select>`. Затем используйте свойство `.value` для установки выбранного option.

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

Результат

Лог

Выполнить

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

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

Установка флажка (checkbox)

Установите флажок с id "subscribe-checkbox" в отмеченное состояние (checked).

HTML

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

                      <input type="checkbox" id="subscribe-checkbox">

<input type="checkbox" id="subscribe-checkbox">

JavaScript

document.getElementById("subscribe-checkbox").input__1 = input__2;

                     document.getElementById("subscribe-checkbox").input__1 = input__2;

Используйте `document.getElementById()` для доступа к элементу checkbox. Затем используйте свойство `.checked` для установки его состояния.

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

Результат

Лог

Выполнить

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

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

Автозаполнение на основе другого поля

Заполните поле "email-copy" тем же значением, что и поле "email", когда пользователь покидает поле "email" (событие onblur).

HTML

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

                      <label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>
<label for="email-copy">Email Copy:</label>
<input type="email" id="email-copy" name="email-copy">

<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>
<label for="email-copy">Email Copy:</label>
<input type="email" id="email-copy" name="email-copy">

JavaScript

document.getElementById("email").input__1 = function() {
  document.getElementById("email-copy").value = input__2.value;
};

                     document.getElementById("email").input__1 = function() {
  document.getElementById("email-copy").value = input__2.value;
};

Используйте `document.getElementById()` для доступа к обоим полям. Добавьте обработчик события `onblur` к полю "email". Внутри обработчика скопируйте значение из "email" в "email-copy".

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

Результат

Лог

Выполнить

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

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

Автозаполнение из массива

Заполните текстовое поле с id "product-name" названием продукта, выбранного в выпадающем списке с id "product-select". Используйте массив `products`.

HTML

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

                      <label for="product-select">Выберите продукт:</label>
<select id="product-select">
  <option value="0">Продукт 1</option>
  <option value="1">Продукт 2</option>
  <option value="2">Продукт 3</option>
</select>
<br>
<label for="product-name">Название продукта:</label>
<input type="text" id="product-name">

<label for="product-select">Выберите продукт:</label>
<select id="product-select">
  <option value="0">Продукт 1</option>
  <option value="1">Продукт 2</option>
  <option value="2">Продукт 3</option>
</select>
<br>
<label for="product-name">Название продукта:</label>
<input type="text" id="product-name">

JavaScript

const products = ["Яблоко", "Банан", "Апельсин"];
document.getElementById("product-select").onchange = function() {
  let selectedIndex = this.input__1;
  document.getElementById("product-name").value = products[input__2];
};

                     const products = ["Яблоко", "Банан", "Апельсин"];
document.getElementById("product-select").onchange = function() {
  let selectedIndex = this.input__1;
  document.getElementById("product-name").value = products[input__2];
};

Создайте массив `products`. Добавьте обработчик события `onchange` к выпадающему списку. Внутри обработчика получите выбранный индекс и используйте его для доступа к соответствующему элементу массива `products`.

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

Результат

Лог

Выполнить

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

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

Динамическое обновление списка

Добавьте новый option в выпадающий список с id "dynamic-select" с текстом и значением, введенными в текстовое поле с id "new-option-text", при нажатии на кнопку с id "add-option-button".

HTML

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

                      <input type="text" id="new-option-text">
<button id="add-option-button">Добавить</button>
<select id="dynamic-select"></select>

<input type="text" id="new-option-text">
<button id="add-option-button">Добавить</button>
<select id="dynamic-select"></select>

JavaScript

document.getElementById("add-option-button").onclick = function() {
  let newOptionText = document.getElementById("new-option-text").value;
  let newOption = document.input__1('option');
  newOption.text = input__2;
  newOption.value = newOptionText;
  document.getElementById("dynamic-select").input__3(newOption);
};

                     document.getElementById("add-option-button").onclick = function() {
  let newOptionText = document.getElementById("new-option-text").value;
  let newOption = document.input__1('option');
  newOption.text = input__2;
  newOption.value = newOptionText;
  document.getElementById("dynamic-select").input__3(newOption);
};

Используйте `document.getElementById()` для доступа к элементам. Создайте новый элемент `<option>` с помощью `document.createElement('option')`. Установите текст и значение нового option. Добавьте новый option в `<select>` с помощью `appendChild()`.

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

Результат

Лог

Выполнить

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

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

Заполнение поля ввода даты

Установите текущую дату в поле ввода даты с id "current-date".

HTML

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

                      <input type="date" id="current-date">

<input type="date" id="current-date">

JavaScript

let today = new Date();
let dd = String(today.getDate()).padStart(2, '0');
let mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
let yyyy = today.getFullYear();
today = yyyy + '-' + mm + '-' + input__1;
document.getElementById("current-date").value = input__2;

                     let today = new Date();
let dd = String(today.getDate()).padStart(2, '0');
let mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
let yyyy = today.getFullYear();
today = yyyy + '-' + mm + '-' + input__1;
document.getElementById("current-date").value = input__2;

Используйте объект `Date` для получения текущей даты. Отформатируйте дату в строку формата YYYY-MM-DD. Используйте `document.getElementById()` и `.value` для установки значения.

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

Результат

Лог

Выполнить

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

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

Заполнение данными из объекта

Заполните поля формы данными из объекта `userData`. Поля имеют id, соответствующие ключам объекта.

HTML

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

                      <input type="text" id="firstName">
<input type="text" id="lastName">
<input type="email" id="email">

<input type="text" id="firstName">
<input type="text" id="lastName">
<input type="email" id="email">

JavaScript

const userData = {
  firstName: "Alice",
  lastName: "Smith",
  email: "alice.smith@example.com"
};

for (let key in userData) {
  if (document.getElementById(key)) {
    document.getElementById(input__1).value = input__2[key];
  }
}

                     const userData = {
  firstName: "Alice",
  lastName: "Smith",
  email: "alice.smith@example.com"
};

for (let key in userData) {
  if (document.getElementById(key)) {
    document.getElementById(input__1).value = input__2[key];
  }
}

Используйте цикл `for...in` для итерации по свойствам объекта. Внутри цикла используйте `document.getElementById()` с ключом объекта для доступа к соответствующему полю и установите его `.value`.

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

Результат

Лог

Выполнить

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

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