В нашей предыдущей главе: Управление DOM: простой счетчик кликов мы узнали, как обновить нашу HTML DOM с помощью Javascript. В этой главе мы будем принимать данные от пользователя и отображать их на нашем сайте.
Начиная
Сначала давайте начнем с наших файлов. Создайте папку и внутри этой папки создайте два файла.
- index.html
- main.js
Щелкните папку правой кнопкой мыши и выберите Открыть с помощью кода. Внутри index.html создайте каркас, нажав ! и tab в VSCode. Мы получим что-то вроде этого:
Нам понадобятся два элемента.
- Поле формы:для получения ввода от пользователя.
- Текстовый элемент:пустой
<p>тег для отображения ввода пользователя.
Давайте создадим эти два элемента внутри нашего тега body. Мы поместим тег h1, чтобы все было профессионально.
<body>
<h1>Writing Stuffs on the Web</h1>
<form id="write">
<input type="text" name="write">
<button type="submit">Write Now</button>
</form>
<p></p>
<script src="./main.js"></script>
</body>
Добавьте main.js прямо перед закрывающим тегом body, и мы закончили с нашей разметкой (пока).
Управление с помощью Javascript
В нашем ранее созданном файле main.js давайте начнем с события загрузки окна, чтобы наш JS выполнялся после того, как окно будет готово.
window.addEventListener('load', () => {
})
Внутри фигурных скобок мы напишем наш JS-код.
Получение ввода от пользователя
Сначала нам нужно настроить таргетинг на наш элемент from. Мы уже добавили id к нашему элементу.
const writeFrom = document.querySelector('#write')
Теперь, когда мы успешно нацелились на form, мы будем прослушивать событие submit.
writeFrom.addEventListener('submit', event => {
event.preventDefault()
})
Обычно, когда форма отправляется, веб-страницы пытаются POST эту форму, что, в свою очередь, запускает обновление окна. event.preventDefault() отменяет это и останавливает отправку формы браузером.
Если мы зарегистрируем event в консоли, мы получим объект SubmitEvent.
Внутри SubmitEvent мы можем найти все связанные с ним атрибуты и методы.
Нам понадобится target[0], который является input элементом нашей формы. target[0].value вернет нам значения внутри нашего элемента input.
Обновление содержания нашего абзаца
Теперь, когда мы успешно получили ввод от пользователя, все, что нам нужно сделать, это обновить тег <p> нашей разметки, и все готово. Весь наш код JS теперь выглядит так:
window.addEventListener('load', () => {
const writeFrom = document.querySelector('#write')
const paragraph = document.querySelector('#write-here')
writeFrom.addEventListener('submit', event => {
event.preventDefault()
const content = event.target[0].value
paragraph.textContent = content
})
})
и вуаля! Наша HTML-разметка теперь обновляется при вводе данных пользователем.
и для некоторой стилизации я добавлю немного CSS, и мы готовы представить.
Что можно попробовать на основе этого примера
- Создайте блокнот
- Создайте приложение Todo
Удачного кодирования.
