Блог

Я пытаюсь получить значение радиовхода, но по какой-то причине оно возвращает значение null. Вот код:

HTML

 <form id="myForm">   
  <input name="gender" type="radio" value="male" />
  <label for="male">Male</label>
  <input name="gender" type="radio" value="female" />
  <label for="female">Female</label>
</form>   
  

JS

 const form = document.getElementById("myForm");
const selectedGender = document.querySelector("input[name='gender']:checked");

  

 
form.addEventListener("submit", (e) => {
  e.preventDefault();
  console.log(selectedGender);
});
  

Почему я получаю null в консоли?

Вы запускаете querySelector даже до того, как произойдет событие выбора. Вы просто регистрируете его на консоли в событии отправки.

Все, что вам нужно сделать, это отправить selectedGender внутри EventListener.

 form.addEventListener("submit", (e) => {
  e.preventDefault();
  const selectedGender = document.querySelector("input[name='gender']:checked");
  console.log(selectedGender);
});
  

Вы сделали выбор раньше, чем dom был готов.

Вы могли бы сделать это внутри функции evenlistener или, по крайней мере, в готовой функции.

 (function() {
const selectedGender = document.querySelector("input[name='gender']:checked");
console.log(selectedGender);
})();
  

или создайте функцию для его вызова.

 bigLogic = () => {

 //A lot of logic

 const selectedGender = document.querySelector("input[name='gender']:checked");
 console.log(selectedGender);
 //More logic
}


form.addEventListener("submit", (e) => {
  e.preventDefault();
  bigLogic();
});