Блог

у меня есть выбор на моей странице, который позволяет мне динамически создавать группы rodio. Когда я изменяю параметры выбора, я удаляю старые радиостанции и добавляю новые в ту же форму. Теперь мне нужно прочитать значение выбранного радио из данной группы, которое в данный момент «видно». Радиогруппы имеют уникальные названия. Когда я пытаюсь выполнить функцию с приведенным ниже кодом, я получаю неперехваченную ошибку типа: документ.Параметр querySelector(…) равен нулю. Что я пытаюсь получить с помощью этих циклов, так это найти правильную группу радиостанций и получить значение (самое важное) от выбранной. Если есть более простой или другой способ сделать это, я открыт для хорошего слова, предпочтительно в js. Это то, что у меня есть на данный момент времени

 for (let key in glowne_klasy_radio) {
   let wartosc = document.querySelector('input[type="radio"][name="'   key   '"]:checked').value; 
}
 

а также это

 let group_radios_names = ["rzut", "podanie", "faul", "strata", "swobodny_ruch_pilki"];
for (let i = 0; i < group_radios_names.length; i  ) {
    let wartosc = document.querySelector('input[type="radio"][name="'   group_radios_names[i]   '"]:checked').value;
}
 

Ваша проблема вызвана непроверенными или несуществующими переключателями. Этого можно легко избежать, введя более терпимый способ запроса .value атрибута, см. Здесь:

 const radios = ["rzut", "podanie", "faul", "strata", "swobodny_ruch_pilki"];

function getAttr(obj,attr){
  return obj amp;amp; obj.closest('div').style.display!=="none" amp;amp; obj[attr]; }

function showHide(){
 document.querySelectorAll('input[type="radio"]').forEach(q=>q.closest("div").style.display=Math.random()>.5?"":"none")
}

function getValues(){
const values={};
radios.forEach(r=>
 values[r]=getAttr(
document.querySelector('input[type="radio"][name="' r '"]:checked'),"value"));

console.log(values);
}

// Create radio buttons:
document.querySelector("div").innerHTML=radios.map(r=>'<div>' r ':' ["A","B","C"].map(v=>'<br><label><input type="radio" name="' r '" value="' v '"> ' v '</label>').join('') '</div>').join("<hr>")
// Connect getValues function to button:
document.querySelectorAll("button").forEach((b,i)=>b.onclick=[showHide,getValues][i]); 

 <button>show/hide some</button>
<button>check values</button>
<div style="height:650px"></div> 

В этой пересмотренной версии сценария я также проверяю видимость группы переключателей, просматривая видимость родительского элемента:

 obj.closest('div').style.display!=="none"
 

Только если это true так, то obj будет возвращено значение of.

Работая с кодом, я использовал элемент.querySelector, где let parent-родительский элемент для моих переключателей.

 let parent = document.querySelector("form[id='glowneRadios']");
let wartosc = parent.querySelector("input[type='radio']:checked").value;