Установка значений полей формы программно.: Тренажер JavaScript: Покоряем HTML DOM

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

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

Список тем

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

Измените текст в поле ввода на "Привет, мир!". Используйте JavaScript, чтобы получить доступ к элементу поля ввода по его ID и установить новое значение.

HTML

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

                      <input type="text" id="myInput" value="Исходный текст">

<input type="text" id="myInput" value="Исходный текст">

JavaScript

document.getElementById(input__1).value = input__2;

                     document.getElementById(input__1).value = input__2;

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

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

Результат

Лог

Выполнить

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

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

Установка значения выпадающего списка

Измените выбранную опцию в выпадающем списке на "Option 2". Вам потребуется получить элемент select по его ID и изменить его выбранное значение.

HTML

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

                      <select id="mySelect">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<select id="mySelect">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

JavaScript

document.getElementById(input__1).value = input__2;

                     document.getElementById(input__1).value = input__2;

Используйте `document.getElementById()` для доступа к элементу select, а затем установите свойство `.value` равным значению нужной опции.

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

Результат

Лог

Выполнить

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

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

Установка чекбокса

Сделайте чекбокс отмеченным с помощью JavaScript. Вам нужно получить доступ к чекбоксу и изменить его состояние.

HTML

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

                      <input type="checkbox" id="myCheckbox">

<input type="checkbox" id="myCheckbox">

JavaScript

document.getElementById(input__1).checked = input__2;

                     document.getElementById(input__1).checked = input__2;

Используйте `document.getElementById()` для доступа к чекбоксу, а затем установите свойство `.checked` в `true`.

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

Результат

Лог

Выполнить

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

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

Снятие отметки с чекбокса

Снимите отметку с чекбокса, используя JavaScript. Это похоже на предыдущее задание, но с другим значением.

HTML

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

                      <input type="checkbox" id="myCheckbox" checked>

<input type="checkbox" id="myCheckbox" checked>

JavaScript

document.getElementById(input__1).checked = input__2;

                     document.getElementById(input__1).checked = input__2;

Используйте `document.getElementById()` для доступа к чекбоксу, а затем установите свойство `.checked` в `false`.

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

Результат

Лог

Выполнить

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

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

Изменение текста в поле с использованием значения другого поля

Скопируйте текст из одного поля ввода в другое. Вам нужно получить значения из одного поля и установить его в другое.

HTML

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

                      <input type="text" id="input1" value="Текст для копирования">
<input type="text" id="input2" value="">

<input type="text" id="input1" value="Текст для копирования">
<input type="text" id="input2" value="">

JavaScript

document.getElementById(input__1).value = document.getElementById(input__2).input__3;

                     document.getElementById(input__1).value = document.getElementById(input__2).input__3;

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

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

Результат

Лог

Выполнить

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

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

Установка значения радиокнопки

Выберите вторую радиокнопку с помощью JavaScript. Вам нужно получить доступ к группе радиокнопок и установить выбранную.

HTML

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

                      <input type="radio" name="myRadio" value="option1"> Option 1
<input type="radio" name="myRadio" value="option2"> Option 2
<input type="radio" name="myRadio" value="option3"> Option 3

<input type="radio" name="myRadio" value="option1"> Option 1
<input type="radio" name="myRadio" value="option2"> Option 2
<input type="radio" name="myRadio" value="option3"> Option 3

JavaScript

document.getElementsByName(input__1)[input__2].checked = true;

                     document.getElementsByName(input__1)[input__2].checked = true;

Используйте `document.getElementsByName()` для получения коллекции радиокнопок с одинаковым именем. Затем установите свойство `.checked` в `true` для нужной радиокнопки (в данном случае, второй).

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

Результат

Лог

Выполнить

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

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

Изменение атрибута placeholder

Измените текст подсказки (placeholder) в поле ввода на "Введите ваше имя". Вам нужно получить доступ к атрибуту placeholder.

HTML

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

                      <input type="text" id="nameInput" placeholder="Имя">

<input type="text" id="nameInput" placeholder="Имя">

JavaScript

document.getElementById(input__1).input__2 = input__3;

                     document.getElementById(input__1).input__2 = input__3;

Используйте `document.getElementById()` для доступа к полю ввода, а затем измените свойство `.placeholder`.

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

Результат

Лог

Выполнить

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

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

Установка значения textarea

Добавьте текст "Это многострочный
текст." в поле textarea. Обратите внимание на перенос строки.

HTML

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

                      <textarea id="myTextarea"></textarea>

<textarea id="myTextarea"></textarea>

JavaScript

document.getElementById(input__1).value = input__2;

                     document.getElementById(input__1).value = input__2;

Используйте `document.getElementById()` для доступа к textarea, а затем установите свойство `.value`.

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

Результат

Лог

Выполнить

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

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

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

Установите значение скрытого поля (hidden input) равным "secret_value". Скрытые поля не отображаются на странице, но их значения можно использовать в JavaScript.

HTML

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

                      <input type="hidden" id="myHiddenInput" value="">

<input type="hidden" id="myHiddenInput" value="">

JavaScript

document.getElementById(input__1).input__2 = input__3;

                     document.getElementById(input__1).input__2 = input__3;

Используйте `document.getElementById()` для доступа к скрытому полю, а затем установите свойство `.value`.

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

Результат

Лог

Выполнить

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

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

Изменение значения поля с помощью innerHTML

Измените текст внутри div элемента, который используется как поле вывода, на "Результат: 10".

CSS

.output { border: 1px solid #ccc; padding: 10px; }

HTML

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

                      <div id="outputDiv" class="output"></div>

<div id="outputDiv" class="output"></div>

JavaScript

document.getElementById(input__1).innerHTML = input__2;

                     document.getElementById(input__1).innerHTML = input__2;

Используйте `document.getElementById()`, чтобы получить доступ к div элементу по ID, а затем используйте свойство `.innerHTML`, чтобы установить новое содержимое.

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

Результат

Лог

Выполнить

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

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

Изменение src изображения

Измените изображение, установив новый URL в атрибут `src`.

HTML

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

                      <img id="myImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Исходное изображение">

<img id="myImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Исходное изображение">

JavaScript

document.getElementById(input__1).src = input__2;

                     document.getElementById(input__1).src = input__2;

Используйте `document.getElementById()`, чтобы получить элемент изображения по ID, а затем измените его свойство `src`.

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

Результат

Лог

Выполнить

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

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

Изменение нескольких значений

Заполните форму данными: имя - "Анна", email - "anna@example.com", возраст - 25.

HTML

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

                      <input type="text" id="nm" placeholder="Имя">
<input type="email" id="email" placeholder="Email">
<input type="number" id="age" placeholder="Возраст">

<input type="text" id="nm" placeholder="Имя">
<input type="email" id="email" placeholder="Email">
<input type="number" id="age" placeholder="Возраст">

JavaScript

document.getElementById("nm").value = input__1;
document.getElementById("email").value = input__2;
document.getElementById(input__3).value = input__4;

                     document.getElementById("nm").value = input__1;
document.getElementById("email").value = input__2;
document.getElementById(input__3).value = input__4;

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

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

Результат

Лог

Выполнить

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

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

Динамическое изменение значения и атрибута

Измените текст в поле ввода на "Новое значение", а затем сделайте это поле недоступным для редактирования (disabled).

HTML

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

                      <input type="text" id="dynamicInput" value="Исходное значение">

<input type="text" id="dynamicInput" value="Исходное значение">

JavaScript

let myElement = document.getElementById(input__1);
myElement.value = input__2;
myElement.input__3 = true;

                     let myElement = document.getElementById(input__1);
myElement.value = input__2;
myElement.input__3 = true;

Используйте `document.getElementById()` для доступа к полю. Сначала измените `.value`, а затем установите `.disabled = true`.

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

Результат

Лог

Выполнить

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

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

Очистка формы

Очистите все поля формы, установив для их значений пустые строки.

HTML

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

                      <input type="text" id="field1" value="Текст1">
<input type="text" id="field2" value="Текст2">
<textarea id="field3">Текст3</textarea>

<input type="text" id="field1" value="Текст1">
<input type="text" id="field2" value="Текст2">
<textarea id="field3">Текст3</textarea>

JavaScript

document.getElementById(input__1).value = "";
document.getElementById(input__2).value = "";
document.getElementById(input__3).input__4 = "";

                     document.getElementById(input__1).value = "";
document.getElementById(input__2).value = "";
document.getElementById(input__3).input__4 = "";

Используйте `document.getElementById()` для каждого поля и установите их `.value` в "".

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

Результат

Лог

Выполнить

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

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

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

Если текущее значение поля ввода меньше 10, установите его равным 10. В противном случае, установите его равным 20.

HTML

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

                      <input type="number" id="numberInput" value="5">

<input type="number" id="numberInput" value="5">

JavaScript

let inputValue = parseInt(document.getElementById(input__1).value);
if (inputValue input__2 10) {
  document.getElementById("numberInput").value = input__3;
} else {
  document.getElementById(input__4).value = 20;
}

                     let inputValue = parseInt(document.getElementById(input__1).value);
if (inputValue input__2 10) {
  document.getElementById("numberInput").value = input__3;
} else {
  document.getElementById(input__4).value = 20;
}

Используйте `document.getElementById()` для доступа к полю. Получите значение поля с помощью `.value`, преобразуйте его в число с помощью `parseInt()`, а затем используйте условный оператор `if/else` для установки нового значения.

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

Результат

Лог

Выполнить

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

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