Получение значений полей формы: Тренажер JavaScript: Покоряем HTML DOM

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

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

Список тем

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

Получите значение, введенное пользователем в текстовое поле, и выведите его в абзац с id="result".

HTML

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

                      <input type="text" id="myInput" value="Изначальный текст">
<p id="result"></p>

<input type="text" id="myInput" value="Изначальный текст">
<p id="result"></p>

JavaScript

var inputValue = document.input__1("myInput").input__2;
document.getElementById("result").textContent = input__3;

                     var inputValue = document.input__1("myInput").input__2;
document.getElementById("result").textContent = input__3;

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

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

Результат

Лог

Выполнить

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

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

Получение значения checkbox

Определите, установлен ли флажок (checkbox) с id="myCheckbox", и выведите результат ("checked" или "unchecked") в абзац с id="result".

HTML

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

                      <input type="checkbox" id="myCheckbox" checked>
<p id="result"></p>

<input type="checkbox" id="myCheckbox" checked>
<p id="result"></p>

JavaScript

var isChecked = document.getElementById("myCheckbox").input__1;
var resultText = input__2 ? "checked" : "unchecked";
document.getElementById("result").textContent = input__3;

                     var isChecked = document.getElementById("myCheckbox").input__1;
var resultText = input__2 ? "checked" : "unchecked";
document.getElementById("result").textContent = input__3;

Используйте `document.getElementById()` для доступа к checkbox. Проверьте свойство `.checked` элемента checkbox. Если `.checked` равно `true`, выведите "checked", иначе – "unchecked".

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

Результат

Лог

Выполнить

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

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

Получение значения radio button

Определите, какая радиокнопка выбрана в группе "myRadioGroup", и выведите её значение в абзац с id="result".

HTML

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

                      <input type="radio" name="myRadioGroup" value="option1" checked> Option 1
<input type="radio" name="myRadioGroup" value="option2"> Option 2
<input type="radio" name="myRadioGroup" value="option3"> Option 3
<p id="result"></p>

<input type="radio" name="myRadioGroup" value="option1" checked> Option 1
<input type="radio" name="myRadioGroup" value="option2"> Option 2
<input type="radio" name="myRadioGroup" value="option3"> Option 3
<p id="result"></p>

JavaScript

var radioButtons = document.input__1("myRadioGroup");
for (var i = 0; i < radioButtons.length; i++) {
  if (radioButtons[i].input__2) {
    document.getElementById("result").textContent = radioButtons[i].input__3;
    break;
  }
}

                     var radioButtons = document.input__1("myRadioGroup");
for (var i = 0; i < radioButtons.length; i++) {
  if (radioButtons[i].input__2) {
    document.getElementById("result").textContent = radioButtons[i].input__3;
    break;
  }
}

Используйте `document.getElementsByName()` для получения коллекции радиокнопок. Переберите коллекцию в цикле. Внутри цикла проверьте свойство `.checked` каждой радиокнопки. Если `.checked` равно `true`, получите значение этой радиокнопки с помощью свойства `.value` и выведите его.

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

Результат

Лог

Выполнить

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

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

Получение значения из select (dropdown)

Получите значение выбранной опции в выпадающем списке (select) с id="mySelect" и выведите его в абзац с id="result".

HTML

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

                      <select id="mySelect">
  <option value="value1">Option 1</option>
  <option value="value2" selected>Option 2</option>
  <option value="value3">Option 3</option>
</select>
<p id="result"></p>

<select id="mySelect">
  <option value="value1">Option 1</option>
  <option value="value2" selected>Option 2</option>
  <option value="value3">Option 3</option>
</select>
<p id="result"></p>

JavaScript

var selectedValue = document.input__1("mySelect").input__2;
document.getElementById("result").textContent = input__3;

                     var selectedValue = document.input__1("mySelect").input__2;
document.getElementById("result").textContent = input__3;

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

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

Результат

Лог

Выполнить

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

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

Получение значений из нескольких checkbox

Получите значения всех отмеченных флажков (checkbox) в группе "myCheckboxes" и выведите их в виде строки, разделенной запятыми, в абзац с id="result".

HTML

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

                      <input type="checkbox" name="myCheckboxes" value="apple"> Apple
<input type="checkbox" name="myCheckboxes" value="banana" checked> Banana
<input type="checkbox" name="myCheckboxes" value="orange" checked> Orange
<p id="result"></p>

<input type="checkbox" name="myCheckboxes" value="apple"> Apple
<input type="checkbox" name="myCheckboxes" value="banana" checked> Banana
<input type="checkbox" name="myCheckboxes" value="orange" checked> Orange
<p id="result"></p>

JavaScript

var checkboxes = document.getElementsByName("myCheckboxes");
var selectedValues = [];
for (var i = 0; i < checkboxes.input__1; i++) {
  if (checkboxes[i].input__2) {
    selectedValues.input__3(checkboxes[i].input__4);
  }
}
document.getElementById("result").textContent = selectedValues.input__5(", ");

                     var checkboxes = document.getElementsByName("myCheckboxes");
var selectedValues = [];
for (var i = 0; i < checkboxes.input__1; i++) {
  if (checkboxes[i].input__2) {
    selectedValues.input__3(checkboxes[i].input__4);
  }
}
document.getElementById("result").textContent = selectedValues.input__5(", ");

Используйте `document.getElementsByName()` для получения коллекции флажков. Переберите коллекцию в цикле. Внутри цикла проверяйте свойство `.checked` каждого флажка. Если `.checked` равно `true`, добавляйте значение флажка (`.value`) к строке с результатами.

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

Результат

Лог

Выполнить

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

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

Получение значения из textarea

Получите текст, введенный пользователем в многострочное текстовое поле (textarea) с id="myTextarea", и выведите его в абзац с id="result".

HTML

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

                      <textarea id="myTextarea">Какой-то
многострочный
текст</textarea>
<p id="result"></p>

<textarea id="myTextarea">Какой-то
многострочный
текст</textarea>
<p id="result"></p>

JavaScript

var textareaValue = document.getElementById(input__1).input__2;
document.getElementById("result").textContent = input__3;

                     var textareaValue = document.getElementById(input__1).input__2;
document.getElementById("result").textContent = input__3;

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

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

Результат

Лог

Выполнить

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

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

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

Измените значение текстового поля с id="myInput" на "Новое значение".

HTML

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

                      <input type="text" id="myInput" value="Старое значение">
<p id="result"></p>

<input type="text" id="myInput" value="Старое значение">
<p id="result"></p>

JavaScript

document.getElementById("myInput").value = input__1;
document.getElementById("result").textContent = document.getElementById("myInput").value;

                     document.getElementById("myInput").value = input__1;
document.getElementById("result").textContent = document.getElementById("myInput").value;

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

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

Результат

Лог

Выполнить

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

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

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

Изменяйте содержимое абзаца с id="result" в зависимости от выбранной опции в выпадающем списке с id="mySelect".

HTML

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

                      <select id="mySelect">
  <option value="option1">Вариант 1</option>
  <option value="option2">Вариант 2</option>
  <option value="option3">Вариант 3</option>
</select>
<p id="result">Выбранный вариант: </p>

<select id="mySelect">
  <option value="option1">Вариант 1</option>
  <option value="option2">Вариант 2</option>
  <option value="option3">Вариант 3</option>
</select>
<p id="result">Выбранный вариант: </p>

JavaScript

document.getElementById("mySelect").input__1 = function() {
  var selectedValue = this.input__2;
  document.getElementById("result").textContent = "Выбранный вариант: " + input__3;
};

                     document.getElementById("mySelect").input__1 = function() {
  var selectedValue = this.input__2;
  document.getElementById("result").textContent = "Выбранный вариант: " + input__3;
};

Добавьте обработчик события `change` к элементу select. Внутри обработчика получайте значение выбранной опции (`.value`) и обновляйте `textContent` абзаца.

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

Результат

Лог

Выполнить

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

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