Почему вылазит ошибка self.querySelector(...) is null?
document.querySelector('.order').addEventListener('submit', (e)=>{ e.preventDefault(); let self = e.currentTarget; let formData = new FormData(self); let name = self.querySelector('input[name="Имя"]').value; let tel = self.querySelector('input[name="Телефон"]').value; let mail = self.querySelector('input[name="Email"]').value; formData.append('Товары', JSON.stringify(productArray)); formData.append('Имя', name); formData.append('Телефон', tel); formData.append('Email', mail); let xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if (xhr.readyState === 4){ if(xhr.status === 200){ console.log('Отправлено'); } } } xhr.open('POST', 'mail.php', true); xhr.send(formData); self.reset(); }); |
document.querySelector('.order').addEventListener('submit', (e)=>{ e.preventDefault(); let self = e.currentTarget; let formData = new FormData(self); let name = self.querySelector('input[name="Имя"]').value; let tel = self.querySelector('input[name="Телефон"]').value; let mail = self.querySelector('input[name="Email"]').value; formData.append('Товары', JSON.stringify(productArray)); formData.append('Имя', name); formData.append('Телефон', tel); formData.append('Email', mail); let xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if (xhr.readyState === 4){ if(xhr.status === 200){ console.log('Отправлено'); } } } xhr.open('POST', 'mail.php', true); xhr.send(formData); self.reset(); });
Дополнительно:
Ответы:
Почему вылазит ошибка self.querySelector(...) is null?
Потому, что элемент не был обнаружен в момент его получения. Используйте DOMContentLoaded.
- Раз тут поиск внутри обработчика и само навешивание этого обработчика не падает, то, скорее всего, проблема не в загрузке, а в самом селекторе и/или в self.
- Алексей Уколов,
https://developer.mozilla.org/en-US/docs/Web/API/D...
Return value
An Element object representing the first element in the document that matches the specified set of CSS selectors, or null is returned if there are no matches. - Спасибо, мне знакомы азы фронтенд-разработки :)
- Если событие submit сработало, значит форма уже отрисовалась. Другое дело, что тут вообще происходит, если селектор формы задан правильно, а на это указывает событие submit, значит .order это форма как минимум, тогда new FormData(formEl) уже должен в себе содержать значение всех полей, кроме файлов.
- Евгений, к чему ты это написал ?, от того что ты это написал - элемент доступным не стал, так как скорее всего там селектор не верный
- Евгений, а это ты типа разжевал для Михаила ? по поводу того что он написал про DomContentLoaded, ничего себе ты какой вахаах)
Посмотрите что в self присваивается, выведете в консоль consol.log(self).
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Ошибка "self.querySelector(...) is null" возникает, когда метод `querySelector()` не находит ни одного элемента, соответствующего переданному селектору. Это может произойти по нескольким причинам:
1. Неправильно указан селектор. Убедитесь, что вы правильно указали селектор и он соответствует элементу на странице. Например, если вы ищете элемент по классу, используйте точку перед именем класса: `.example-class`.
2. Элемент, который вы пытаетесь найти, еще не загружен на странице. Убедитесь, что ваш скрипт выполняется после загрузки DOM-дерева. Для этого можно использовать событие `DOMContentLoaded`:
```html
document.addEventListener("DOMContentLoaded", function() {
// ваш код здесь
});
```
3. Элемент, который вы пытаетесь найти, находится в другом контексте. Убедитесь, что вы используете правильный контекст для поиска элемента. Например, если вы пытаетесь найти элемент внутри другого элемента, используйте метод `querySelector()` на этом элементе:
```html
var parent = document.getElementById("parentElement");
var child = parent.querySelector(".childElement");
```
4. Элемент, который вы пытаетесь найти, динамически добавляется на страницу. В этом случае убедитесь, что ваш скрипт выполняется после добавления элемента на страницу.
Если после проверки вы все еще сталкиваетесь с ошибкой "self.querySelector(...) is null", попробуйте использовать метод `querySelectorAll()`, который вернет коллекцию элементов по указанному селектору.