Сейчас мы с вами научимся получать текст
от пользователей нашего сайта. Для этого
в HTML предусмотрен специальный тег input,
представляющий собой текстовое поле для ввода
данных:
У данного тега есть специальный атрибут value,
задающий начальный текст, который будет написан
в инпуте по заходу на страницу:
<input value="text">
Пользователь нашего сайта после захода на
страницу может поменять текст инпута. При
этом, если у нас есть переменная, содержащая
ссылку на этот инпут, то свойство value
этой переменной всегда будет содержать текущее
значение текста инпута.
Попробуем на практике. Пусть у нас инпут
с атрибутом value:
<input id="elem" value="text">
Получим ссылку на этот инпут в переменную:
let elem = document.querySelector('#elem');
А теперь выведем на экран текущий текст инпута:
alert(elem.value);
А теперь поменяем текст инпута на другой:
elem.value = 'new text';
Дан инпут:
<input id="elem" value="text">
Сделайте кнопку, нажатие на которую будет выводить текущий текст инпута. После захода на страницу нажмите на кнопку, чтобы увидеть текущий текст инпута, затем поредактируйте текст в инпуте и еще раз нажмите на кнопку. Убедитесь в том, что выведется новый текст инпута.
Дан инпут и кнопка. По нажатию на кнопку запишите в инпут какой-нибудь текст.
Дан инпут, абзац и кнопка. По нажатию на кнопку запишите в абзац текст из инпута.
Даны два инпута и кнопка. В первый инпут пользователем вводится число. По нажатию на кнопку запишите во второй инпут квадрат введенного числа.
Даны два инпута и кнопка. По нажатию на кнопку запишите в первый инпут значение второго инпута, а во второй инпут - значение первого. Ваш код должен работать универсально, для любых значений инпутов.
Даны 5 инпутов, абзац и кнопка. В
инпут вводятся числа. По нажатию на кнопку
запишите среднее арифметическое введенных
чисел в абзац.