Почему вылазит ошибка self.querySelector(...) is null?

Question

[N_ik_i_ta]

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();
});

Answer 1

[Михаил Р.]

Почему вылазит ошибка self.querySelector(...) is null?

Потому, что элемент не был обнаружен в момент его получения. Используйте DOMContentLoaded.

Comments

[Алексей Уколов]

Раз тут поиск внутри обработчика и само навешивание этого обработчика не падает, то, скорее всего, проблема не в загрузке, а в самом селекторе и/или в 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) уже должен в себе содержать значение всех полей, кроме файлов.

[szQocks]

Евгений, к чему ты это написал ?, от того что ты это написал - элемент доступным не стал, так как скорее всего там селектор не верный

[szQocks]

Евгений, а это ты типа разжевал для Михаила ? по поводу того что он написал про DomContentLoaded, ничего себе ты какой вахаах)

Answer 2

[Евгений]

Посмотрите что в self присваивается, выведете в консоль consol.log(self).