querySelector не дает доступа к value

Question

Получаю данные из формы, делаю все по туториалу, однако при записи form.querySelector('[name="nickname"]') не дает доступа к .value

Видел похожий вопрос на Stackoverflow, однако такой вариант у меня не работает и это не является решением.

Примечательно, если в form.querySelector() в скобки не записать ничего, то выбор .value появляется.

По id пробовал, не получилось

form.html:

<form id="form">
    <input type="text" id="nickname" name="nickname" placeholder="Nickname" required><br>
    <input type="email" id="email" name="email" placeholder="[email protected]" required><br>
    <input type="submit" value="submit">
</form>

form.js:

const form = document.getElementById('form');

const nickname = form.querySelector("[name='nickname']");
const email = form.querySelector("[name='email']");

const data = {
    name: nickname.value,
    email: email.value
};

console.log(data)

Answer 1

По идее, такая записать должна показывать null-- form.querySelector("[email='email']").

Чтобы было значение в инпуте должны быть прописаны value="12". А если нужно чтобы данные были данные при отправки форму нужно что-то такое.

form.addEventListener('submit', function (e) {......})

Например:

form.addEventListener('submit', function(e) {
  e.preventDefault()

  const nickname = form.querySelector("[name='nickname']");
  const email = form.querySelector("[name='email']");

  const data = {
    name: nickname.value,
    email: email.value,
  };

nickname.value = '';
    email.value = '';

  console.log(data)
})

<form id="form">
  <input type="text" id="nickname" name="nickname" placeholder="Nickname" required><br>
  <input type="email" id="email" name="email" placeholder="[email protected]" required><br>
  <input type="submit" value="submit">
</form>

БЛОГ НА HUSL

querySelector не дает доступа к value

Ответы (1 шт):