Урок 15 · JavaScript
Берём значения полей и не теряем их при Enter
Событие submit вешают на форму, а не click на кнопку. Тогда сработает и щелчок, и Enter.
Почему это следующий шаг
Кнопка уже считает клики. Форма должна забрать имя и показать ответ на странице.
Как сделать
preventDefault отменяет перезагрузку, если ответ нужно показать здесь. FormData достаёт поля по имени name. Перед использованием обрежь пробелы. Пустое имя — это текст ошибки, а не «успех». Не очищай форму, пока не понял, что значение прочитано.
form.addEventListener("submit", (event) => {
event.preventDefault();
const data = new FormData(form);
const name = String(data.get("name") || "").trim();
status.textContent = name ? `Здравствуйте, ${name}` : "Введите имя";
});Что проверить
- Enter в поле не обходит твой код.
- Пустое имя показывает ошибку.
- У поля есть name, иначе FormData его не увидит.
Попробуй
Сделай форму имени, которая пишет приветствие или просит заполнить поле.
Практикумы по теме
- Очистить поле и вернуть фокус — Форма добавления удобнее, если после записи поле пустеет само и сразу готово к следующей строке.
- Проверка формы до отправки — Браузер уже умеет required. Свой скрипт нужен, когда правило твоё: имя короче двух букв или не выбрана галочка согласия.