есть форма опроса, получилось вывести снизу. при отправки, имя и емеил, как вывести в текст радио кнопку которую нажали, т.е Пол пользователя, я вот попробовал перебрать оба кнопки по классу циклом и поставил условие если в кноке[индекс] есть атрибут cheked то записать его в спан, но чото не работает, помогите разобратся
<h1>Форма опроса</h1>
<form class= "form" action="#" method="post" >
<p>Имя:<input class="name" type="text" required></p>
<p>Email:<input class="email" type="email"></p>
<span>Пол:</span>
<input type="radio" name="radio" class="radio" id="1">
<label class="redio-label" for="1">Мужской</label>
<input type="radio" name="radio" class="radio" id="2">
<label class="redio-label" for="2">Женский</label><br><br>
<span>Оценка сервиса</span>
<input type="range" min="0" max="10" step="1"><br>
<p>Интересы</p>
<input type="checkbox" class="check" id="check1">
<label for="check1">Спорт</label><br>
<input type="checkbox" class="check" id="check2">
<label for="check2">Музыка</label><br>
<input type="checkbox" class="check" id="check3">
<label for="check3">Кино</label><br>
<p>Коментарий</p>
<textarea class="textarea" width="300" height="150"></textarea><br>
<input type="submit" value="Отправить" class="btn">
</form>
<p class="imya"></p>
<p class="imail"></p>
<p class="pol"></p>
<p><output class="ocenka"></output></p>
<p class="interes"></p>
<p class="koment"></p>
вот скрипт
let nameEl = document.querySelector('.name');
let emailEl = document.querySelector('.email');
let radioEl = document.querySelectorAll('.radio');
let checkEl = document.querySelector('.check');
let btn = document.querySelector('.btn');
btn.addEventListener("click", function(e){
let pimya = document.querySelector('.imya');
let pmail = document.querySelector('.imail');
let ppol = document.querySelector('.pol');
e.preventDefault()
pimya.textContent = `Имя: ${nameEl.value}`
pmail.textContent = `Мэил: ${emailEl.value}`
for (i=0;i<radioEl.length;i++){
if(radioEl[i].getAttribute("checked")){
ppol.textContent = `Пол: ${radioEl[i].value}`
}
}
})
