Запись на курсы по HTML, CSS, JavaScript, PHP, Python, фреймворкам и CMS,
а также: помощь в поиске работы и заказов, стажировка на реальных проектах→
⊗jsPmDmTF 351 of 505 menu
Вступайте в телеграмм-канал сайта code.mu: новинки, статьи, интервью, задачи, бесплатные курсы и тренинги. Жми для вступления:)

Работа с текстовыми полями в JavaScript

Сейчас мы научимся получать текст от пользователей нашего сайта. Для этого в HTML предусмотрен специальный тег input, представляющий собой текстовое поле для ввода данных.

<input>

У данного тега есть специальный атрибут value, задающий начальный текст, который будет написан в инпуте по заходу на страницу:

<input value="text">

Пользователь нашего сайта после захода на страницу может поменять текст инпута. При этом, если у нас есть переменная, содержащая ссылку на этот инпут, то свойство value этой переменной всегда будет содержать текущее значение текста инпута.

Попробуем на практике. Пусть у нас инпут с атрибутом value:

<input id="elem" value="text">

Получим ссылку на этот инпут в переменную:

let elem = document.querySelector('#elem');

А теперь выведем на экран текущий текст инпута:

console.log(elem.value);

А теперь поменяем текст инпута на другой:

elem.value = 'new text';

Дан инпут и кнопка. По нажатию на кнопку запишите в инпут какой-нибудь текст.

Дан инпут, абзац и кнопка. По нажатию на кнопку запишите в абзац текст из инпута.

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

Даны два инпута и кнопка. По нажатию на кнопку запишите в первый инпут значение второго инпута, а во второй инпут - значение первого. Ваш код должен работать универсально, для любых значений инпутов.

Даны 5 инпутов, абзац и кнопка. В инпут вводятся числа. По нажатию на кнопку запишите среднее арифметическое введенных чисел в абзац.

byenru