Сейчас мы с вами научимся получать текст от пользователей нашего сайта. Для этого в 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 инпутов, абзац и кнопка. В инпут вводятся числа. По нажатию на кнопку запишите среднее арифметическое введенных чисел в абзац.