Ошибка "self.querySelector(...) равно null" возникает, когда метод `querySelector` не находит элемент на странице с указанным селектором. Это может произойти из-за опечаток в селекторе или если элемент не был найден на момент выполнения кода.
Для улучшения кода отправки формы на сервер с помощью XMLHttpRequest можно использовать следующие рекомендации:
1. Проверить, что все переменные и элементы, на которые вы ссылаетесь в коде, действительно существуют на странице.
2. Использовать событие "submit" для формы, чтобы предотвратить ее стандартное поведение (перезагрузку страницы) и обработать отправку данных с помощью JavaScript.
3. Создать объект `FormData`, чтобы собрать данные формы для отправки на сервер.
4. Использовать метод `XMLHttpRequest` для отправки данных на сервер асинхронно.
5. Обработать ответ от сервера в обработчике `onreadystatechange` и выполнить необходимые действия в зависимости от статуса ответа.
Пример улучшенного кода:
```javascript
const form = document.querySelector('#order-form');
form.addEventListener('submit', function(event) {
event.preventDefault(); // Предотвращение стандартной отправки формы
const formData = new FormData(form);
const xhr = new XMLHttpRequest();
xhr.open('POST', '/submit_order', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log('Заказ отправлен на сервер');
// Дополнительная обработка ответа
} else {
console.error('Произошла ошибка при отправке заказа');
}
};
xhr.send(JSON.stringify(Object.fromEntries(formData)));
});
```
Этот код обрабатывает отправку формы с данными о заказе на сервере с использованием XMLHttpRequest и JSON для отправки данных и приема ответа.