Отправка формы

Когда странице нужно спросить сразу несколько вещей, её поля помещают в форму: элемент form. В форме есть кнопка, которая её отправляет, — button с type="submit":

<form id="newsletter">
    <label for="email">Электронная почта</label>
    <input id="email">
    <button type="submit">Подписаться</button>
</form>
<p id="thanks"></p>

Пользователь отправляет форму, нажимая кнопку или клавишу Enter в одном из её полей. В обоих случаях форма получает событие submit, поэтому обработчик нужно вешать на неё: на форму, а не на кнопку.

Когда форму отправляют, браузер ещё и сам делает кое-что: отправляет набранное на сервер и загружает страницу заново. Это его действие по умолчанию, и на странице, где формой занимается скрипт, оно мешает: страница начинается с нуля, всё набранное пропадает, как и всё, что показал ваш обработчик. Проверьте это в окне просмотра этого упражнения: наберите что-нибудь в полях и нажмите кнопку. Страница загрузится заново, и поля окажутся пустыми. Метод event.preventDefault() велит браузеру не выполнять действие по умолчанию:

const form = document.querySelector("#newsletter");
const emailInput = document.querySelector("#email");
const thanks = document.querySelector("#thanks");

form.addEventListener("submit", function (event) {
    event.preventDefault();
    thanks.textContent = `Спасибо! Мы напишем на ${emailInput.value}.`;
});

Вызывайте его первым, в начале обработчика: если что-то ниже закончится ошибкой, страница всё равно не перезагрузится.

Типичные ошибки:

• event.preventDefault; без скобок не вызывает метод, поэтому ничего не делает, и страница перезагружается.
• button внутри формы отправляет форму, даже если у него нет type="submit". Если в форме есть другая кнопка, которая не должна её отправлять, дайте этой кнопке type="button".